从 入 门 开始 ，H5 快 速 入 行 
大 ) 从 H5 设 计 的 概念 、 类 型 、 营 销 等 基础 开始 ， 带 你 入 和 户 博 昌 编 看 


© 从 工具 入 手 ， 精 通 H5 广 告 
开发 工具 、 设 计 工 具 、 上 传 工 具 、 分 享 工 具 等 和 应有尽有 


OO 从 实战 专题 ， 精 讲 H5 案 例 
营销 、 推 广 、 招 聘 、 节 日 、 活 动 、 微 商 广告 等 丰 语 全 面 


汰 北大 党 出 版 社 


Photoshop H5 广告 设计 


户 博 ”编者 


也 壮大 学 出 版 社 
北 大 


内 容 人 简介 


菜鸟 如 何 快速 成 为 HS 广告 页 面 设计 高 手 ? 如 何 用 H5 广 告 页 面 征 服 上 司 和 客户 ? 如 何 零 基础 制作 
出 专业 、 漂 亮 的 HS 广告 页 面 ? 本 书 将 按照 两 条 线路 帮助 读者 精通 Photoshop H5 广 告 设计 : 

一 条 是 横向 案例 线 ， 通 过 20 多 个 经 典 案 例 ， 包 括 产品 推广 、 活 动 推广 、 互 粉 增 粉 、 人 才 招 募 、 
企业 宣传 、 节 日 活动 、 会 议 洲 请、 喜庆 请 束 等 ， 从 零 开 始 学 习 制 作 H5 广 告 效 果 。 

男 一 条 是 纵向 技巧 线 ， 讲 解 了 配色 常识 、 文 字 排版 、 版 式 布 局 等 核心 技能 ， 帮 助 读者 彻底 读 
懂 、 玩 透 H5 广 告 设计 。 

本 书 适合 H5 微 信 页 面 广告 设计 者 、 新 媒体 广告 设计 师 、 移 动 互联 网 广告 设计 人 员 等 阅读 。 
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H5〈 主 要 指 HTML 5 技术 ) 是 伴随 看 移动 互联 网 兴起 的 一 种 
新 型 广告 工具 ， 同 时 随 着 微 信 小 程序 的 兴起 ， 加 速 带 动 了 H5 的 传 
播 。 利 用 H5 进 行 广告 传播 已 经 成 为 新 时 代 广 告 媒体 的 主要 传播 方 
式 ， 它 改变 了 传统 广告 行业 的 局 限 性 ， 最 大 限度 地 扩张 了 广告 的 
传播 力度 ; 同时 互联 网 以 及 手机 的 普及 ， 扩 大 了 H5 的 传播 范围 ， 
使 得 广告 真正 可 以 无 处 不 在 地 传播 。 一 些 趣味 性 的 H5 广 告 ， 更 是 
使 得 用 户 可 以 参与 其 中 ， 并 成 为 HS 广告 的 传播 与 推动 者 。 

尽管 H5 的 兴起 ， 令 广告 行业 转变 了 传统 的 营销 模式 ， 但 在 图 
书市 场 上 却 几 乎 没有 与 HS 广告 设计 相关 的 书籍 。 所 以 ， 笔 者 基于 
以 下 三 点 ， 策 划 了 本 书 : 

(1) H5 广 告 的 发 展 ， 必 定 会 带动 对 人 才 的 需求 ， 如 对 H5 开 
发 设计 师 的 需要 。 

(2) 目前 关于 H5 的 书 ， 己 开始 有 不 少 品种 ， 销 售 都 非常 不 
错 ， 但 有 关 H5 广 告 设计 却 还 没有 一 本 书 系 统 地 讲述 过 。 

(3) 目前 已 经 有 学 校 开始 开设 与 HS 相关 的 课程 ， 人 才 有 对 技 
能 的 需求 ， 而 图 书 是 技能 的 载体 。 

笔者 潜心 收集 资料 ， 以 平台 及 软件 制作 作为 案例 示范 ， 为 读 
者 展示 H5 广 告 的 设计 方法 ， 和 希望 读者 阅读 本 书后 可 以 举一反三 ， 
制作 出 更 多 精美 的 效果 。 


本 书 与 同类 书 相 比 ， 最 大 的 特色 如 下 。 

本 书 主 要 分 为 两 大 篇 章 ， 每 个 篇 章 又 详细 分 
为 多 个 章节 ， 并 且 书 中 内 容 是 根据 读者 对 知识 点 的 需求 排行 来 进行 
分 布 摆 放 的 ， 读 者 可 以 根据 分 类 快速 找到 目 己 需求 的 知识 点 。 

本 书 选 取 多 种 方便 快捷 的 图 形 图 像 工 具 、 视 
频 工 具 、 音 频 工 具 等 进行 讲解 ， 其 中 包括 人 人 秀 、 蜂 梨 ME、 易 企 
秀 等 网 页 ， 以 及 Photoshop、Illustrator、After Effects 等 客户 端 
软件 。 

本 书 内 容 从 零 基础 开始 ， 先 从 配色 、 文 字样 
式 、 版 式 方面 总 体 介 绍 H5 广 告 设计 的 要 点 ， 再 落实 到 多 个 制作 
网 页 及 软件 平台 ， 并 根据 每 个 平台 的 不 同 特性 来 设计 广告 案例 
效果 。 

每 个 案例 都 是 精 挑 细 选 ， 每 个 实例 都 是 从 零 
开始 制作 ， 细 致 讲解 了 设计 的 所 有 过 程 ， 目 的 也 是 为 了 帮助 读者 
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可 以 更 加 直观 地 感受 到 设计 的 整个 流程 。 

(5) 案例 丰富 : 精 选 多 个 热门 的 广告 类 别 来 做 案例 解说 ， 包 括 产品 推广 、 活 动 推广 、 互 粉 增 
粉 、 人 才 招 葵 、 企 业 宣传 、 节 日 活动 、 会 议 邀 请 以 及 喜庆 请 束 8 个 热门 类 别 ， 每 种 类 别 均 有 3 个 广告 设 
计 案 例 示 范 。 


本 书 内 容 


本 书 中 的 实战 案例 均 有 详细 的 操作 步骤 ， 可 以 指引 读者 正确 地 制作 出 H5 广 告 效果 ， 且 皆 配 有 素 
材 、 效 果 源 文件 以 及 语音 视频 全 程 详细 讲解 ， 同 时 在 章节 中 穿插 的 “专家 提醒 ”， 也 指出 了 一 些 相 关 
要 点 ， 使 读者 可 以 迅速 掌握 关键 要 点 。 

本 书 的 案例 都 是 挑选 当下 最 热门 的 H5 广 告 效果 ， 让 读者 在 阅读 和 学 习 本 书 的 过 程 中 所 制作 的 H5 
效果 上 皆 是 目前 最 流行 、 最 实用 的 效果 。 

本 书 中 的 24 个 广告 设计 案例 实战 ， 全 部 录制 了 带 语音 讲解 的 演示 视频 ， 时 间 长 度 达 430 多 分 钟 (7 
个 多 小 时 ) ， 重 现 书 中 所 有 技能 实例 的 操作 ， 帮 助 读者 快速 掌握 H5 广 告 设计 的 相关 操作 技巧 。 

本 书 主要 从 “ 微 页 H5- 设 计 篇 ”与 “ 微 页 H5- 案 例 篇 ”两 大 篇 章 来 讲述 新 媒体 广告 设计 的 具体 
方法 。 


密友 H5_ 案 例 入 


本 书 还 是 一 本 侧重 案例 分 析 的 实战 宝典 ， 全 书 图 片 数量 有 1300 多 张 ， 每 一 个 知识 点 都 有 相应 的 案 
例 图 片 。 本 书 采取 图 文 相 结合 的 方式 进行 案例 分 析 ， 能 够 方便 读者 一 步 一 步 地 掌握 每 一 个 案例 的 设计 
方法 ， 并 在 每 个 步骤 相对 应 的 图 片 中 标示 了 相应 的 图 注 ， 让 读者 通过 图 文 并 成 的 内 容 快 速 了 解 核心 知 
识 ， 节 约 大 量 的 阅读 时 间 。 读 者 在 阅读 过 程 中 还 应 该 注意 实际 操作 的 重要 性 ， 以 快速 提升 H5 广 告 设 计 
的 技能 。 


技巧 总 结 


广告 页 面 在 视觉 上 给 用 户 的 第 一 感受 便 是 直接 传达 的 信息 ， 作 为 新 型 的 广告 推广 工具 ，H5 同 样 也 
不 例外 ， 所 以 在 设计 H5 界 面 时 ， 美 观 的 界面 设计 尤为 重要 。 由 此 ， 笔 者 在 本 书 的 写作 中 ， 总 结 了 关于 
HS 广告 设计 的 要 点 技巧 及 知识 点 ， 主 要 表现 在 以 下 20 个 要 点 。 

(1) 在 H5 页 面 数 量 剧 增 且 同 质 化 严重 的 发 展 潮流 中 ，H5 的 页 面 创意 设计 便 是 确保 自己 的 广告 推 


广 脱颖而出 的 一 种 方式 ， 我 们 在 制作 Hs 广 告 效果 时 ， 要 确保 效果 创意 新 颖 的 同时 又 能 够 传递 出 所 要 推 
广 的 广告 信息 。 

(2) 在 设计 HS 页面 时 ， 可 以 根据 页 面 的 烦琐 程度 选取 合适 的 工具 进行 制作 ， 一 些 基 于 互联 网 平 
台 的 HS 设计 工具 ， 不 仅 操 作 人 简单 ， 所 制作 出 的 效果 也 非常 不 错 ， 同 时 非常 适用 于 零 基础 的 新 人 使 用 。 

(3) 在 各 种 图 像 处 理 的 软件 中 ，Photoshop 可 以 说 是 一 个 非常 强大 的 图 像 处 理 软件 ， 其 包含 很 多 
图 像 处 理工 具 ， 用 户 只 需 一 一 和 尝试， 选择 需要 的 工具 对 图 片 进行 处 理 与 设计 即 可 。 

(4) 建议 用 户 在 制作 图 像 时 ， 可 以 利用 滤 镜 效果 来 轻松 制作 富有 特色 的 图 像 效 果 ， 例 如 
Photoshop 目 带 的 “ 滤 镜 ”命令 ， 不 但 拥有 各 种 类 别 的 滤 镜 可 供用 户 选 择 ， 而 且 还 能 够 对 参数 值 进行 设 
计 与 更 改 ， 并 且 它 的 应 用 场合 很 多 。 

(5) 虽然 Photoshop 的 图 像 处 理 功 能 很 强大 ， 但 是 其 操作 有 一 定 的 难度 ， 尽 管 Photoshop 为 用 户 
提供 了 最 大 限度 的 编辑 空间 ， 但 是 它 的 组 合 功 能 需要 用 户 自 己 来 摸索 ， 这 一 点 让 新 手 不 知 如 何 动手 
制作 ， 所 以 笔者 建议 ， 对 Photoshop 的 图 像 处 理 功 能 不 太 熟 悉 的 用 户 ， 可 以 多 尝试 学 习 “ 微 页 H5- 案 例 
篇 ”中 的 各 种 实战 案例 教程 与 视频 ， 或 使 用 其 他 的 软件 或 APP 来 对 图 片 进行 一 键 基础 的 美化 操作 。 

(6) 对 于 一 些 比较 贱 烦 、 不 太 方 便 使 用 Photoshop 设 计 的 图 片 ， 也 可 以 和 演 试 用 网 站 工具 ， 如 图 
表 、 表 单 等 ， 这 些 内 容 在 网 站 中 一 般 都 会 给 出 基础 组 件 ， 用 户 只 需 修 改 参 数 ， 并 简单 排版 就 可 以 了 。 

(7) 在 设计 各 类 广告 图 片 时 ， 可 以 先 对 背景 图 片 进行 处 理 ， 使 其 呈现 出 最 好 的 效果 时 再 使 用 ， 
这 样 可 以 为 广告 作品 增添 很 大 的 魅力 。 

(8) 制作 H5 广 告 页 面 时 ， 要 注意 控制 图 片 的 文件 大 小 ， 如 果 文 件 过 大 ， 会 导致 加 载 缓 慢 ， 严 重 
时 会 导致 卡 机 、 软 件 崩 演 。 

(9) 在 H5 广 告 页 面 中 ， 可 以 尽量 多 选取 那些 颜色 比较 鲜艳 、 明 亮 的 图 片 来 使 用 ， 这 类 图 片 可 以 
更 加 吸引 观众 的 注意 力 。 

(10) 对 于 有 关 图 片 处 理 与 制作 的 软件 ， 由 于 篇 幅 有 限 ， 笔 者 没有 进行 过 多 详细 的 介绍 ， 在 此 
列举 几 种 在 设计 时 也 经 常会 用 到 的 图 形 图 像 处 理 软件 : CorelPHOTO、CorelDRAW、PageMaker 以 及 
InDesign， 和 希望 用 户 在 学 完 本 书 中 的 基础 应 用 软件 之 余 ， 可 以 多 摸索 ， 制 作出 更 多 精美 的 HS 广告 
效果 。 

(11) 在 设计 H5 页 面 的 过 程 中 ， 用 户 除了 可 以 使 用 计算 机 之 外 ， 还 可 以 尝试 使 用 各 种 手机 端 
APP、 小 程序 、 网 页 来 制作 H5 广 告 效果 。 

(12) 在 H5 页 面 中 穿插 各 种 相关 元 素 及 素材 时 ， 需 选取 贴 合 主题 且 清 晰 的 文件 ， 也 可 通过 H5 设 
计 网 站 中 的 相关 元 素 互 动 插件 来 添加 与 制作 H5 页 面 。 

(13) 文字 一 直 是 H5 页 面 中 必 不 可 少 的 一 个 关键 元 素 ， 通 过 一 些 相关 的 文字 讲解 ， 有 利于 向 用 户 
传达 产品 或 企业 的 相关 信息 ， 但 生硬 的 文字 穿插 会 导致 用 户 对 整个 页 面 失 去 阅读 兴趣 ， 所 以 在 字体 设 
计时 ， 需 要 注意 与 HS 页 面 主题 格调 一 致 。 

(14) H5 页 面 的 整体 视觉 体验 ， 取 决 于 色彩 的 搭配 ， 而 相应 地 了 解 色彩 原理 及 一 些 实 用 的 配色 技 
巧 ， 可 以 使 整个 H5 页 面 的 色彩 更 为 舒适 宜人 。 

(15) 制作 产品 推广 类 H5s 广 告 效 果 时 ， 需 要 注重 突出 产品 的 信息 ， 同 时 需要 简单 明了 地 让 用 户 在 
页 面 中 抓 取 两 个 关键 信息 点 : 产品 及 产品 信息 。 

(16) 制作 活动 推广 类 H5s 广 告 效果 时 ， 主 要 吸引 用 户 的 还 是 活动 的 奖励 程度 ， 除 了 需要 有 好 的 画 
面 感 ， 用 户 的 参与 程度 也 取决 于 活动 奖品 的 力度 。 
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(17) 制作 互 粉 增 粉 类 H5 广 告 效 果 时 ， 就 需要 在 页 面 中 添加 与 制作 一 些 好 的 图 文 信息 效果 ， 吸 引 
用 户 的 兴趣 ， 从 而 达到 互 粉 增 粉 的 效果 。 

(18) 制作 人 才 招 募 类 的 H5 广 告 效 果 时 ， 需 要 根据 不 同类 别 的 招聘 形式 进行 相对 应 的 主题 设计 ， 
例如 ， 校 园 招聘 就 可 以 搭配 使 用 大 量 青春 活力 的 颜色 ， 以 贴近 校园 招聘 的 主题 。 

(19) 制作 品牌 宣传 类 的 H5 广 告 效果 时 ， 就 比较 倾向 于 对 品牌 自身 的 塑造 ， 设 计时 要 使 得 整个 页 
面相 当 于 品牌 的 微 官 网 ， 可 以 运用 一 些 符合 品牌 的 视觉 语言 ， 既 能 向 用 户 传递 品牌 信息 ， 又 可 以 表达 
出 品牌 的 精神 态度 。 

(20) 对 于 会 议 邀 请 函 及 请 束 类 的 H5 页 面 ， 色 彩 上 的 搭配 一 定 要 贴近 主题 ， 让 用 户 从 视觉 上 便 能 
感知 到 所 受 邀 的 会 议 的 气 场 。 

本 书 由 卢 博 编著 ， 参 与 编写 的 人 员 还 有 周 博 洋 ， 在 此 表示 感谢 。 由 于 作者 知识 水 加 pre 
平 有 限 ， 书 中 难免 有 错误 和 朴 漏 之 处 ， 奶 请 广大 读者 批评 、 指 正 。 ea 

本 书 提供 了 案例 的 素材 文件 和 效果 文件 ， 扫 一 扫 右 侧 的 二 维 码 ， 推 送 到 自己 的 邮 
箱 后 下 载 获 取 。 
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HS 是 伴随 着 移动 互联 网 兴起 的 一 种 新 型 广告 工具 ， 由 于 它 是 移动 互联 网 
的 衍生 物 ， 因 此 也 具有 很 多 移动 互联 网 的 广告 优势 ， 如 娱乐 化 、 硫 片 化 、 社 
会 化 、 互 动 性 强 等 。 本 章 主要 介绍 HS 广告 设计 的 基础 知识 ， 包 括 H5 的 基本 概 
念 、 页 面 类 型 以 及 功能 服务 等 。 


HS 页 面 的 类 型 
形式 为 功能 服务 
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1 由 什么 是 H5 


H5 如 今 是 移动 互联 网 中 的 热 词 ， 那 么 HS 究竟 是 什么 ， 又 有 何 特点 ， 下 面 我 们 将 做 一 个 深入 的 
分 析 。 


1.11 H5 是 什么 


首先 ， 我 们 来 解析 一 下 HS 这 个 词 。“H ”是 指 HTML， 它 是 “ 超 文 本 标记 语言 《HyperText Markup 
Language) ”的 英文 单词 缩写 ， 简 单 来 说 ， 就 是 一 种 规范 ， 一 种 标准 ， 它 会 以 网 页 的 形式 呈现 在 我 们 
面前 。 如 图 1-1 所 示 ， 这 就 是 两 张 H5 广 告 的 页 面 。 
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图 1-1 HS 广告 页 面 


H5 中 的 “5” 指 的 是 “第 5 版 ”， 其 发 展 历程 如 图 1-2 所 示 。 
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图 1-2 HTML 的 发 展 历程 
其 中 ，IETF (Itemet Engineering Task Force) 指 的 是 互联 网 工程 任务 组 ， 是 全 球 互联 网 最 具 权 威 的 技 
术 标 准 化 组 织 。 而 W3C 就 是 我 们 比较 熟悉 的 万 维 网 联盟 ， 它 在 Web 技 术 领 域 非常 有 权威 和 影响 力 。 
对 于 H5 开 发 人 员 来 说 ， 这 些 都 是 必修 功课 ,但 这 里 我 只 是 简单 介绍 一 下 。 最 早 的 HTML 技 术 是 
从 1991 年 开始 研究 ， 直 到 1993 年 才 正 式 推 出 。 此 后 ，HTML 经 历 了 数 次 的 更 新 换代 ， 在 这 其 中 出 现 了 
两 种 比较 优秀 的 方案 ， 那 就 是 由 WHATWG (Web Hypertext Application Technology Working Group, 网 
页 超 文 本 应 用 技术 工作 小 组 ) 提出 的 Web Applications 1.0， 以 及 由 W3C (World Wide Web Consortium 
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万 维 网 联盟 ) 提出 的 XHTML 2.0。 最 终 ， 这 两 个 大 型 互联 网 组 织 在 2006 年 达成 共识 ， 共 同 推 出 全 新 的 
HTML 技 术 ， 也 就 是 现在 的 H5。 
当然 ，HS 在 一 开始 并 没有 引起 人 们 的 关注 ， 而 是 一 直 在 进行 优化 升级 ， 这 个 周期 也 是 相当 的 长 ， 
差不多 经 过 了 8 年 的 时 间 ，W3C 才 最 终 宣 布 HTML5 标 准 规范 制定 完成 ， 并 面向 全 球 开 放 。 
HTML 5 的 主要 功能 包括 语义 、 离 线 与 存储 、 设 备 访 问 、 连 接 、 多 媒体 、3D 与 图 形 、CSS3 等 ， 可 
以 用 于 网 页 端 与 移动 端的 连接 ， 让 用 户 在 互联 网 上 也 能 轻松 体验 各 种 类 似 桌 面 的 应 用 。 


1.1.2 无 处 不 在 的 H> 


对 于 H5 广 告 来 说 ， 有 一 句 俗话 ， 那 就 是 “七 分 笔 内 容 ， 三 分 靠 传 播 ”。 因 此 ， 我 们 在 注重 内 容 设 
计 的 同时 ， 还 需要 多 渠道 全 方位 地 推广 H5， 使 其 形成 类 似 病毒 传播 的 效应 。 

H5 的 主要 载体 是 智能 手机 ， 而 智能 手机 往往 都 比较 小 ， 能 够 被 用 户 随 映 携带 ， 也 就 为 用 户 能 够 随时 使 
用 HS 提供 了 方便 。 智 能 手机 已 经 成 为 大 众 普遍 使 用 的 工具 ， 并 且 向 着 更 轻 更 薄 更 智能 化 的 方 同 发 展 着 。 

用 户 使 用 智能 手机 进行 拍照 、 上 网 等 行为 十 分 常见 ， 也 就 促使 用 户 要 随时 使 用 H5 提 供 的 服务 。 例 
如 ， 父 亲 节 到 来 的 时 候 ， 就 可 以 制作 一 个 精美 的 H5 页 面 来 吸引 用 户 ， 如 图 1-3 所 示 ， 这 就 是 为 父亲 节 
制作 的 一 个 H5 动 画 页 面 。 


图 1-3 父亲 节 的 HS 动画 
随 着 HS 技术 的 快速 发 展 ， 几 乎 所 有 在 线 的 应 用 类 网 站 ， 本 质 上 都 是 一 个 “HS”。 例 如 ， 图 1-4 所 
示 为 哗 哩 哗 哩 视频 网 站 。 
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图 1-4 ， 哗 哩 唑 哩 视频 网 站 
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例如 ， 图 1-5 所 示 为 新 浪 微 博 社 交 网 站 。 
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图 1-5 ”新浪 微 博 社 交 网 站 
各 种 高 大 上 的 网 站 ， 基 本 也 是 HS 页 面 ， 如 图 1-6 所 示 为 锤子 科技 网 站 。 
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图 1-6 ”锤子 科技 官网 
甚至 各 种 在 线 游戏 ， 也 都 是 H5 页 面 ， 如 图 1-7 所 示 为 H5 网 页 在 线 游戏 。 


图 1-7 H5 网 页 在 线 游戏 
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1.1.3 ” H5 的 主要 功能 


H5 广 告 最 主要 的 特点 就 是 跨 平台 性 和 本 地 存储 特性 ， 如 表 1-1 所 示 。 


表 1-1 H5 的 特点 


广告 特点 | 具体 分 析 ] 优势 分 析 
通过 HS 技术 制作 的 页 面 或 者 应 用 可 以 轻松 兼容 | ， 
Ar SS ， 上 EE » 
跨 平台 性 | 各 种 终 兹 和 设备 ， 如 PC 庙 与 移动 端 、Windows| 5 有 全 人才 人 本 


个 = 4 4 \ 
与 Linux、AndroidSiOS 等 营 成 本 ， 为 企业 与 创业 者 带 来 更 多 的 发 展 机 遇 


本 地 存 启动 时 间 要 远 远 低 于 APP HS 非常 适合 手机 等 小 容量 的 智能 设备 ， 同 时 也 
储 特性 网 络 速度 比 APP 更 快 可 以 带 来 更 好 的 视听 体验 


可 以 说 ，HS5 技 术 的 成 熟 ， 不 但 为 移动 互联 网 开辟 了 一 种 全 新 的 广告 推广 方式 ， 同 时 也 推动 了 移动 
互联 网 的 快速 发 展 。 在 广告 方面 ，H5 的 主要 功能 如 图 1-8 所 示 。 


我 们 可 以 将 各 种 媒体 表现 方式 
融入 H5 页 面 中 


在 HS 中 可 以 重点 展示 品牌 ， 方 
便 用 户 阅 读 与 分 享 


图 1-8 HS 的 主要 功能 


1.1.4 ”使 用 H5 有 了 哪 旦 做 势 


了 解 H5 广 告 的 前 世 今 生 后 ， 下 面 我 们 来 看 看 它 的 功能 运用 ， 分 析 一 下 H5 场 景 为 何 有 利于 广告 推 
广 ? HS 广告 是 随 着 移动 互联 网 的 发 展 而 发 展 的 ， 但 是 作为 一 种 新 型 的 移动 广告 推广 ， 其 发 展 的 速度 极 
快 ， 在 短 时 间 内 已 经 成 为 互联 网 的 一 大 特色 。 

对 于 企业 而 言 ， 要 想 突破 传统 的 广告 方式 ， 获 得 更 好 的 推广 ， 那 么 就 需要 利用 H5 这 种 新 的 推广 手 
段 开拓 广告 市 场 ， 抓 住 机 遇 。 从 用 户 的 角度 而 言 ，HS 直 接 影响 着 用 户 对 企业 的 相关 认识 ， 有 具体 分 析 如 
图 1-9 所 示 。 


图 1-9 HS 的 具体 分 析 
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二 家 挤占 ) 。 是 作为 企业 对 外 展示 的 一 个 窗口 ， 在 实用 方面 的 重要 体现 就 是 提升 企业 的 形 
\ 日 bb J» 、 一 a : 
一 一 -一 一 一 象 。 一 个 成 功 的 H5， 往 往 是 从 多 个 方面 入 手 来 达成 一 定 目 标的 ， 其 中 就 有 提升 企 : 
， 业 形象 方面 的 作用 。 


HS 广告 之 所 以 能 够 快速 地 提升 影响 力 ， 其 根本 的 优势 不 
可 忽视 ， 主 要 分 为 如 图 1-10 所 示 的 5 个 方面 。 

1. 开发 成 本 比较 低 

从 企业 的 传统 广告 宣传 方式 而 言 ， 如 电视 广告 、 企 业 横 
幅 、 宣 传 海报 、 活 动 展板 、 活 动 宣传 单 、 灯 箱 宣传 、 刊 物 宣 
传 等 需要 投入 的 资金 较 多 ， 而 宣传 的 效果 往往 有 限 。 尤 其 是 
电视 广告 、 网 络 广告 等 ， 需 要 的 费用 更 多 。 

而 Hs 广 告 ， 企 业 所 需要 花费 的 只 是 HS 页 面 的 设计 成 本 图 1-10 了 5 广告 的 5 大 优势 
和 维护 成 本 ， 投 入 的 资金 并 不 算 多 。 如 图 1-11 所 示 即 为 用 HS 进行 宣传 和 广告 的 优势 分 析 。 


图 1-11 用 HS 进行 宣传 和 广告 的 优势 分 析 


2. 用 户 使 用 成 本 低 

从 用 户 角 度 来 说 ， 他 不 需要 下 载 安装 H$， 也 不 用 浪费 流量 和 时 间 ， 可 以 更 快 地 触 达 自己 的 核心 需 
求 ， 因 此 其 使 用 成 本 非常 低 。 用 户 看 到 一 个 H5 时 ， 想 看 就 可 以 根据 提示 操作 ， 不 想 看 直接 关 掉 就 行 ， 
也 不 需要 邱 载 这 些 操作 。 

3. 全 面 立 体 的 展示 

在 由 多 个 要 素 组 成 的 企业 形象 中 ， 对 于 用 户 而 言 ， 其 中 产品 形象 和 功能 形象 是 他 们 最 为 关注 的 ， 
也 是 企业 H5 内 容 展示 的 重点 。 

H5 的 作用 就 是 对 企业 形象 进行 全 面 立 体 的 展示 ， 企 业 形 象 的 体现 主要 有 如 下 几 个 方面 ， 如 图 1-12 


所 示 。 
en Es 


图 1-12 企业 形象 的 体现 
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入 家 指点 ) H5 的 界面 尽管 不 大 ， 但 是 自身 能 够 通过 多 种 导航 条 功能 或 者 各 种 互动 链接 一 
到 入 外 所 ， 步 步 地 引导 互动 操作 ， 将 内 容 全 面 而 细致 地 体现 出 来 ， 不 仅 能 够 打破 常规 的 广告 页 、 
。 面 令 人 厌烦 的 规格 ， 又 能 够 很 好 地 吸引 用 户 了 解 广告 内 容 。 
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4. 广告 的 交互 性 强 

与 娱乐 性 的 APP 应 用 不 同 ， 企 业 H5 广 告 带 有 的 商业 标志 及 强烈 的 僵 利 性 质 ， 在 一 定 程 度 上 缩小 了 
HS 的 用 户 定位 范围 ， 但 是 通过 兴趣 点 进行 互动 仍然 是 广告 的 重要 途径 ， 也 是 吸引 用 户 的 主要 方式 。 

HS 包括 多 种 交互 方式 ， 如 助力 型 游戏 、 节 日 型 游戏 、 竞 技 型 游戏 、 行 业 型 游戏 等 ， 可 以 帮助 企业 
更 快 地 吸 粉 增 粉 ， 如 图 1-13 所 示 。 
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图 1-13 节日 型 互动 游戏 

需要 注意 的 是 ， 对 于 H5 广 告 而 言 ， 往 往 是 多 种 广告 方式 并 存 于 H5 上 的 ， 通 过 环 环 相 扣 的 广告 互 
动 形 式 来 吸引 用 户 。 

5. 增加 产品 营业 额 

H5 广 告 的 根本 目标 是 增加 产品 营业 和 额 ， 需 要 注意 的 是 ， 如 果 用 网 站 建设 的 思维 来 定义 H5， 那 么 
HS 的 主要 作用 就 变 成 了 信息 展示 平台 ， 而 不 是 一 个 增加 产品 营业 额 的 途径 。 如 图 1-14 所 示 ， 这 是 茶 品 
牌 手机 产品 的 H5 广 告 页 面 。 
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图 1-14 手机 产品 的 HS 广告 页 面 
它 不 但 可 以 全 方位 地 展示 产品 ， 让 用 户 对 企业 产品 产生 浓厚 的 兴趣 ， 而 且 还 可 以 在 页 面 尾 端 添 加 
相关 的 店铺 或 者 产品 购买 链接 ， 让 用 户 可 以 及 时 下 单 支付 。 
与 传统 的 广告 方式 相 比 ，H5 广 告 可 以 更 好 地 激 起 用 户 的 阅读 和 分 享 欲望 ， 甚 至 有 些 优秀 的 H5 可 
以 实现 数 亿 级 的 曝光 量 。 因 此 ， 如 今 很 多 企业 和 商家 都 在 争先 恐 后 地 进入 H5 广 告 领域 ， 以 借 此 实现 更 


高 的 广告 目的 。 
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1.1.5 探 系 HS 广告 的 潮流 和 万 回 


H5 广 告 的 发 展 离 不 开 移动 互联 网 的 支持 ， 尤 其 是 4G 时 代 的 开启 ， 以 及 移动 终端 设备 的 影响 力 提 
升 ， 进 一 步 为 移动 互联 网 的 发 展 注 入 了 巨大 的 能 量 ， 从 而 带动 了 HS 广告 的 迅速 更 新 与 普及 狂潮 。 

那么 ， 进 行 HS 广告 活动 有 哪些 要 点 呢 ? 如 图 1-15 所 示 ， 这 
是 笔者 简单 整理 的 一 些 H5 广 告 的 潮流 和 方 同 ， 希 望 大 家 关注 。 

企业 开发 H5 的 根本 目标 是 利用 H5 进 行 广告 。 主 要 原因 在 
于 两 个 方面 ， 首 先是 可 以 通过 HS 积聚 不 同类 型 的 网 络 受众 ， 
其 次 是 通过 H5 获 取 大 众 流量 和 定向 流量 。 

作为 移动 互联 网 时 代 的 标志 之 一 ，H5 的 影响 力 不 言 而 
喻 。H5 广 告 的 发 展 前 景 十 分 广阔 ， 尤 其 是 随 着 智能 化 趋势 的 
进一步 体现 ， 未 来 大 众 对 于 H5 的 需求 会 更 大 。 从 企业 H5 的 角 图 1-15 探索 H5 广 告 的 潮流 和 方向 
度 出 发 ，H5 广 告 的 要 点 主要 体现 在 如 下 5 个 方面 。 

1. 设计 更 具 创 意 

随 着 智能 手机 的 功能 越发 强大 ，H5 应 用 的 数量 快速 增加 ，H5 相 互 间 的 竞争 也 越 来 越 激 烈 。 在 这 
种 情况 下 ， 设 计 上 的 创意 就 成 为 H5 获 得 用 户 认 可 的 重要 途径 之 一 。 

对 于 HS 广告 而 言 ， 只 有 企业 想不到 的 创意 ， 没 有 做 不 到 的 创意 。 需 要 注意 的 是 ，H5 模 板 库 里 有 
超过 100 万 个 HS 页 面 ， 但 是 并 没有 100 万 个 独特 的 HS 创意 ， 可 见 创意 并 不 是 凭空 而 来 、 容 易 获 得 的 。 
对 于 企业 而 言 ， 在 设计 HS 之 初 可 以 通过 5 种 方式 对 HS 创意 进行 精准 分 析 ， 从 而 进一步 将 创意 体现 于 H5 
中 ， 有 具体 的 内 容 分 析 如 图 1-16 所 示 。 


潮流 和 方向 


2. 适用 环境 更 广 

垂直 化 是 H5 广 告 的 一 个 特色 。 对 于 非 大 型 企业 而 言 ， 为 了 让 企业 在 庞大 的 竞争 群体 中 脱 疾 而 出 ， 
找到 一 个 切入 口 作为 H5 广 告 的 特色 ， 己 经 成 为 一 种 主流 模式 。 

移动 互联 网 的 进步 ， 促 使 H5 广 告 推广 的 规模 快速 扩大 ，H5 在 内 容 上 更 为 丰富 和 多 元 化 ， 尤 其 是 
对 于 衣食 住 行 等 与 大 众 密切 相关 的 领域 ， 内 容 垂 直 化 趋势 已 经 是 有 目 共 睹 的 。 


ee 对 于 H5 广 告 而 言 ， 把 握 H5 的 设计 细节 ， 通 过 垂直 化 的 产品 进行 重点 突破 ， 是“ 
和 家 指点 ) 十分 重要 的 \ 


. 


3. 使 用 体验 更 好 
HS 广告 之 所 以 能 够 快速 发 展 ， 获 得 大 众 的 认可 ， 在 于 H5 与 传统 的 互联 网 产品 存在 一 定 的 区 别 。 
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在 用 户 的 使 用 体验 方面 ，H5 有 着 明显 的 优势 ， 主 要 集中 于 3 个 内 容 ， 分 别 是 使 用 场景 的 体验 、 使 用 时 
间 的 体验 、 使 用 效率 的 体验 。 

在 传统 的 PC 端 ， 用 户 固 定 地 盯 着 屏幕 和 使 用 键盘 和 鼠标 操作 ， 场 景 较为 单一 。 对 于 H5 的 用 户 而 
言 ， 只 要 能 携 市 手机 的 地 方 ， 就 可 以 操作 H5， 使 用 场景 几乎 没有 限制 。 传 统 PC 端 的 用 户 在 使 用 时 间 
上 往往 是 持续 的 一 段 较 长 的 时 间 ， 而 雄 片 化 却 是 移动 互联 网 的 特色 ,用户 可 能 随时 中 断 现在 的 手机 操 
作 ， 等 茶 些 事情 结束 后 ， 再 继续 之 前 的 H5 操 作 。 

H5 的 界面 大 小 局 限于 智能 手机 的 界面 大 小 ， 相 比 于 传统 PC 端 ， 其 界面 较 小 ， 但 整个 界面 的 利用 
率 很 高 。 通 过 H5 本 里 对 相关 内 容 合 理 地 规划 和 选择 ， 用 户 能 够 获得 更 为 精准 的 信息 ， 避 人 免 使 用 传统 PC 
端 时 信息 过 多 过 灯 的 情况 。 


一 一 一、 ”对 于 用 户 而 言 ， 具 体 的 使 用 体验 还 是 需要 从 H5 的 具体 功能 应 用 中 获得 。 如 果 
ER H5 的 功能 体验 能 够 迎合 用 户 的 需求 ， 刺 激 用 户 进行 使 用 和 分 享 ， 那 么 H5 就 有 一 定 
的 实用 价值 。 

4 . 用 户 规模 更 大 

H5 的 潜力 巨大 ， 在 于 其 用 户 数 量 的 规模 庞大 ， 用 户 规模 决定 了 H5 的 广告 价值 。 目 前 ，H5 广 告 主要 基 
于 微 信 来 传播 ， 根 据 腾讯 旗下 的 企 殷 智 酷 发 布 的 《2017 微 信用 户 & 生 态 研究 报告 》 数 据 显示 ， 截 止 到 2016 
年 12 月 ， 微 信 在 全 球 共 拥有 8.89 亿 月 活用 户 “〈 即 月 度 活跃 用 户 ) ， 而 新 兴 的 公众 号 平台 拥有 1000 万 个 。 

在 传统 的 PC 端 ， 一 个 商业 企业 的 网 站 上 活跃 用 户 数量 达到 1 亿 几 乎 是 不 可 能 的 事情 ， 而 H5 通 过 极 
其 便利 的 操作 方式 吸引 了 用 户 的 使 用 ， 从 而 创造 了 庞大 的 用 户 规模 ， 进 而 产生 了 极 大 的 广告 潜力 。 

5. 支付 更 加 便捷 

随 着 智能 手机 的 普及 ， 在 线 支付 方式 开始 逐渐 流行 ， 目 前 已 经 成 为 年 轻 人 的 主流 支付 方式 ， 关 于 
在 线 支付 的 相关 内 容 分 析 如 图 1-17 所 示 。 


属于 网 上 资金 结算 工具 ， 帮 助 用 户 实 现 相关 
款项 的 快速 到 位 ， 从 而 缩短 收 放款 的 周期 时 间 


图 1-17 关于 在 线 支付 的 相关 内 容 分 析 
对 于 用 户 而 言 ， 可 以 在 HS 页 面 中 使 用 移动 文 付 的 方式 ， 如 微 信 文 付 、 文 付 宝 、 百 度 钱包 等 ， 来 完 
成 相关 球 项 的 文 付 。 


H5 页 面 的 类 型 


从 2014 年 7 月 22 日 起 ， 火 爆 朋 友 圈 的 《 围 住 神经 猫 》 的 发 布 ， 到 后 来 引发 传统 广告 震动 的 大 众 点 
评 H5 专 题 页 《我 们 之 间 只 有 一 个 字 》。 短 短 的 时 间 ， 各 种 H5 广 告 、 游 戏 纷纷 显露 头角 。H5 页 面 的 类 
型 主要 体现 在 4 个 方面 ， 下 面 进行 详细 介绍 。 
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活动 运营 是 指 企业 针对 不 同性 质 的 活动 进行 运营 策划 、 活 动 实施 ， 以 及 嫁接 相关 产业 打造 产业 链 
等 。 但 伴随 着 活动 运营 、 策 划 实施 的 成 本 逐渐 升 高 ， 以 及 失败 风险 的 加 大 ， 如 今 的 H5 互 动 活动 策划 需 
要 有 更 强 的 互动 ， 用 高 质量 的 、 高 话题 性 的 设计 页 面 来 打破 以 往 的 常规 广告 投放 ， 来 促成 用 户 传播 。 

例如 ， 图 1-18 所 示 为 趣味 化 活动 运营 的 H5 页 面 。 
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图 1-18 趣味 化 活动 运营 的 HS 页 面 


在 素材 有 限 及 场景 不 好 直接 构建 时 ， 通 过 设计 硅 张 的 卡通 画面 ， 可 以 让 用 户 耳 目 一 新 ， 产 生 有 趣 
的 感受 ， 更 愿意 进行 分 享 ， 从 而 为 产品 引进 流量 ， 也 维持 了 老 客 户 的 消费 。 


1.2.2 品牌 豆 传 型 


品牌 宣传 型 H5 页 面 与 活动 运营 型 H5 页 面 不 同 的 是 ， 活 动 运营 型 H5 页 面 更 注重 时 效 性 ， 而 品牌 宣 
传 型 H5 页 面 ， 更 倾 同 于 品牌 的 形象 塑造 ， 往 往 整 个 页 面 的 设计 等 于 一 个 品牌 的 微 官网 设计 ， 在 设计 上 
需要 运用 符合 品牌 气质 的 视觉 语言 ， 运 用 大 胆 的 设计 、 走 心 的 文案 ， 则 用 户 传 达 品 牌 的 精神 态度 ， 给 
用 户 留 下 深刻 的 印象 。 

例如 ， 图 1-19 所 示 为 菜品 牌 宣传 的 H5 页 面 。 
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图 1-19 ” 某 品 牌 宣 传 的 HS 页 面 
在 悠久 的 、 象 征 权 威 的 复古 报纸 上 ， 以 走 心 的 文字 、 陈 述 的 方式 回顾 品牌 发 展 的 历史 ， 让 用 户 在 
看 故事 的 、 看 视频 的 同时 就 能 够 全 面 地 了 解 到 品牌 ， 最 后 对 品牌 进行 产品 宣传 。 
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产品 介绍 型 的 HS 页 面 ， 设 计 聚 焦点 在 于 产品 功能 的 展示 与 介绍 ， 运 用 HS 的 人 机 交互 方式 淋漓 尽 
致 地 回 用 户 展 示 品 牌 特性 ， 以 及 沉浸 式 的 体验 ， 让 用 户 有 身 临 其 境 的 感觉 ， 从 而 为 产品 引进 客户 
流量 。 

例如 ， 图 1-20 所 示 为 某 汽车 产品 介绍 的 H5 页 面 。 


图 1-20” 菜 汽 车 产品 介绍 的 H5 页 面 
通过 交互 的 动画 ， 让 用 户 感 知 到 这 款 汽 车 有 哪些 特性 ， 以 及 汽车 的 细节 展示 、 参 数 分 析 ， 使 得 一 
些 高 大 上 的 东西 让 普通 用 户 也 能 清楚 了 解 ， 从 而 拉 近 汽车 与 用 户 的 距离 。 


1.2.4 总 结 报告 型 


总 结 报告 最 早 流行 于 企业 内 部 进行 工作 总 结 的 会 议 ， 多 为 纸 质 文 档 或 PPT 形 式 ， 但 伴随 着 支付 宝 
“十 年 账单 ”引发 热 议 后 ， 各 大 企业 的 总 结 报告 也 开始 使 用 HS 技术 来 实现 。 
例如 ， 图 1-21 所 示 为 支付 宝 年 上 度 账 单 的 H5 页 面 。 
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图 1-21 支付 宝 年 度 账 间 的 再 5 页 面 
人 年 的 年 度 账单 ， 结 合 恨 好 的 互动 体验 使 得 原本 乏味 的 总 结 报告 变 得 生动 有 趣 ， 并 且 和 用 


Photoshop 


HD 广 告 设计 


形式 为 功能 服务 


形式 为 功能 服务 是 一 种 设计 理念 ， 最 早 源 于 19 世 纪 美 国 著名 建筑 师 路 易 斯 。 沙 利文 提出 的 “形式 
追随 功能 ”的 观点 : “Form follows the function ,This is a law。 ”该 理念 认为 设计 应 主要 追求 功能 ， 一 
起 都 以 实用 为 主 ， 所 有 的 艺术 表现 都 必须 围绕 着 功能 来 做 形式 。 


1.3.1 商 音 图 文 的 H> 页 面 


简单 图 文 的 HS 页 面 是 最 早期 最 典型 的 一 种 表现 形式 。 从 


字面 意思 来 划分 ，“ 图 ” 意 指 图 片 、 揪 画 、GIF 等 ， 而 “ 文 ” 

则 表示 标题 文字 、 文 本 文字 等 。 通 过 简单 的 交互 操作 ， 形 成 类 

似 和 幻灯 片 的 传播 效果 。 NA 
例如 ， 图 1-22 所 示 为 简单 图 文 的 H5 页 面 。 科 先 择 它 体 管 。 


1.3.2 ”礼物 / 变 卡 /邀请 函 的 H5 页 面 


企业 品牌 的 宣传 为 了 达到 目的 ， 抓 住 用 户 的 心理 是 非常 图 1-22 
重要 的 ， 每 个 人 都 喜欢 收 到 礼物 的 感觉 ， 很 多 品牌 正 是 抓 住 了 这 一 点 ， 推 出 了 各 种 H5 形 式 的 礼物 、 痪 
卡 、 邀 请 函 ， 从 而 在 提升 用 户 对 品牌 好 感度 的 同时 达到 宣传 品牌 的 目的 。 


简单 图 文 H5 页 面 


例如 ， 图 1-23 所 示 为 中 秋 礼 物 的 H5 页 面 。 
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选择 你 的 星座 避 | 
图 1-23 “中秋 礼物 的 HS 页 面 


1.3.3 ”问答 /评分 /测试 的 H5 页 面 


问答 、 评 分 、 测 试 的 H5 页 面 已 经 屡见不鲜 了 ， 在 各 大 社交 平台 ， 软 件 APP 上 都 会 有 这 种 形式 的 
人 存在， 利用 用 户 的 好 奇 心 和 探索 欲 ， 诱 导 用 户 一 步 步 走 下 去 ， 在 设计 页 面 时 配 以 适当 的 色彩 、 图 文 拱 


第 1 章 “HD2 广 告 设计 入门 


配 ， 弱 化 答题 的 枯燥 感 ， 让 用 户 乐 在 其 中 的 同时 潜移默化 地 了 解 到 品牌 所 要 推广 的 内 容 ， 再 加 以 分 享 
给 予 奖 励 ， 无 形 中 使 用 户 为 你 做 出 广告 推广 。 
例如 ， 图 1-24 所 示 为 美食 问答 的 HS 页 面 。 


图 1-24 美食 问答 的 H5 页 面 


1.3.4 ”游戏 的 HS 页面 


HS 游戏 的 盛行 ， 一 方面 是 因为 操作 较 电 脑 简 单 、 有 趣 ， 另 一 方面 是 可 玩 性 强 ， 出 门 无 聊 随 吴 市 痢 
手机 就 可 以 玩 ， 但 随 痢 缺乏 创意 和 同 质 化 的 无 脑 小 游戏 逐渐 增多 ， 导 致 用 户 产 生 了 厌倦 心理 。 如 果品 
牌 符 试 通过 游戏 进行 传播 推广 ， 就 需要 有 新 的 创意 ， 让 用 户 感 兴趣 。 

例如 ， 图 1-25 所 示 为 吃 糖 豆 小 游戏 的 H5 页 面 。 


叱 糠 豆 小 游戏 的 HS 页 面 


HS 可 以 说 是 目前 覆盖 领域 最 广 的 传播 媒介 ， 因 为 其 跨 平 台 的 优势 性 可 以 
显著 地 降低 开发 与 运营 成 本 。 本 章 主 要 介绍 HS 设计 的 常用 工具 ， 包 括 基 于 互 
联网 平台 的 HS 开发 工具 、 基 于 应 用 软件 的 HS 设计 工具 以 及 选择 HS 的 工具 组 合 
形式 等 内 容 。 


基于 互联 网 平台 的 H5 开 发 工具 
基于 应 用 软件 的 H5 设 计 工 具 
选择 H5 的 工具 组 合 形式 
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基于 互联 网 平台 的 H5 开 发 工具 


基于 互联 网 平台 的 H5 开 发 工具 ， 主 要 以 网 站 和 网 站 所 发 布 的 软件 的 形式 存在 ， 不 用 通过 设计 师 便 
可 独立 完成 ， 只 要 有 思想 ， 便 可 以 在 线 编 辑 ， 同 时 在 这 些 工 具 中 为 用 户 提 供 了 大 量 的 模板 系 材 ， 乔 用 
户 没有 设计 思路 ， 可 以 选取 适合 的 模板 更 改 主 题 即 可 。 


2.11 APICloud: H5 代 码 编辑 工具 


APICloud 是 一 家 “云端 一 体 ” 的 移动 应 用 服务 提供 商 ， 为 开发 者 从 “ 云 ” 和 “ 端 ” 两 个 方 癌 提供 
API， 并 推行 “云端 一 体 ” 的 理念 ， 重 新 定义 并 简化 了 移动 应 用 开发 技术 ， 使 移动 应 用 大 大 缩短 了 开 
发 周期 ， 同 时 也 为 H5 的 生成 提供 了 很 大 的 便 易 性 。APICloud 的 主页 如 图 2-1 所 示 。 


高 效 、 省 心 的 App 开 发 平台 


标准 化 App 开 发 平台 


图 2-1 APICloud 的 主页 
APICloud 的 主要 优势 和 特点 如 图 2-2 所 示 。 


图 2-2 APICloud 的 主要 优势 和 特点 


“APICloud 的 高 效 数据 通道 ， 拥有 从 云 到 如 目的 数据 连接 通道 ， ， 使 用 TCP 协 议 实现 
4 及 时 到 达 ， 以 及 用 HTTPS 协 议 加 密 。 
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图 2-3 所 示 为 APICloud 网 站 中 的 开发 案例 。 
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图 2-3 APICloud 网 站 中 的 开发 案例 
图 2-4 所 示 为 APICloud 网 站 中 的 视频 教程 主页 。 
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图 2-4 APICloud 网 站 中 的 视频 教程 主页 
在 APICloud 中 的 “开发 案例 ”和 “视频 教程 ”页 面 中 ， 提 供 了 不 同类 型 的 案例 及 视频 教学 ， 在 制 
作 H5 之 前 ， 可 以 看 看 这 些 作品 及 教学 ， 作 为 参考 。 


2.1.2 Egret: 提供 开源 的 H5 引 擎 


Egret 全 称 为 Egret Open Platform， 义 叫 “ 晶 路 开放 平台 ”， 其 中 包含 多 个 工具 以 及 项 目 ， 是 基于 
TypeScript 语 言 开 发 的 HS 游戏 引擎 ， 是 一 套 完整 的 HS 游戏 开发 解决 方案 。 该 平台 旨 在 为 开发 商 、 第 三 
方 服务 商 及 渠道 之 则 建立 桥梁 ， 降 低 开 发 者 进入 H5 行 业 的 门槛 ， 并 实现 从 开发 、 上 线 到 运营 的 一 系列 
连 线 。Egret 的 主页 如 图 2-5 所 示 。 
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图 2-5 ”Egret 的 主页 
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Egret 的 主要 优势 和 特点 如 图 2-6 所 示 。 


图 2-6”Egret 的 主要 优势 和 特点 
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~ 些 对 数据 传输 速度 和 稳定 性 有 影响 的 瓶颈 和 环节 ， 实 现 更 快 、 更 稳定 的 内 容 传输 。 


图 2-7 所 示 为 Egret 网 站 中 的 HS 游戏 。 


Egret 游戏 


图 2-7 Egret 网 站 中 的 H5 游 戏 


2.1.3 云 适 配 : 一 键 PC 网 站 转移 动 网 站 


红心 云 适 配 一 一 AllMobilize Inc， 是 由 一 家 着 力 于 自主 创新 技术 运用 实现 的 高 科技 企业 ， 基 于 自 
主创 新 国产 企业 浏览 器 ， 通 过 “统一 办 公 入 口 十 安全 管理 平台 十 移动 开发 工具 ”一 站 式 移动 化 解决 方 
案 。 红 芯 云 适 配 的 主页 如 图 2-8 所 示 。 


已 云 访 配 
© 红 苍 云 通 也 


红心 云 适 乱 ( AllMobilize ) 


全 球 氢 先 的 移动 化 解决 方案 供应 商 ， 为 企业 
移动 化 离 效 开发 提供 完美 支持 


马上 坟 验 观看 视 袜 


| / 
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云 适 配 的 主要 优势 和 特点 如 图 2-9 所 示 。 


图 2-9 云 适 配 的 主要 优势 和 特点 


i 
i 或 程序 接口 ， 隶 属于 直接 用 户 接口 。 . 


2.1.4 IH5: HTML5 可 视 化 编辑 工具 


iH$5 的 前 里 为 VXPLO 互 动 大 师 ， 是 一 套 完 全 目 主 研发 的 H5 设 计 工具 ， 用 户 可 以 在 线 编辑 网 页 交互 


内 容 ， 作 品 支持 各 种 移动 端 设备 和 主流 浏览 
作为 一 款 基于 云端 的 网 页 H5 交 互 设计 工具 ， 刘 5 的 优势 在 于 能 使 用 户 在 无 须 编码 的 情况 下 ， 通 过 


可 视 化 的 操作 ， 对 H5 页 面 进行 在 线 编辑 。iH5 的 主页 如 图 2-10 所 示 。 


专业 的 H5 在 线 制作 工具 


图 2-10 ”iH5 的 主页 


po) ， HS 看 上 去 像 一 寺 制作 前 端 HH5 的 SaaS ( 软件 即 服务 ) 产品 ， ,但 本 质 上 iH5 集 成 
[专家 指 上 “前后 端 ”所 需 的 几乎 所 有 功能 ， 用 户 只 需要 学 习 iH5 的 制作 工具 就 可 以 完成 名 
: 种 场景 、 济 游戏 、 本 不 需要 任何 “代码 基础 ” : 


iHS 的 主要 优势 和 特点 如 图 2-11 所 示 。 
iH$ 提 供 了 类 别 、 场 景 和 效果 三 个 基本 的 导航 功能 ， 同 时 它 的 每 个 导航 功能 菜单 都 比较 丰富 ， 类 


别 包 括 全 部 、 官 方 模板 、 设 计 师 模板 、 新 手 专属 、 免 费 ; 场景 包括 邀请 函 、 企 业 招 聘 、 电 向/ 相册 、 刷 
日 祝福 等 诸多 类 型 ， 如 图 2-12 所 示 。 
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图 2-11 iH5 的 主要 优势 和 特点 


”图 2-12 证 5 的 模板 精 选 页 面 
iH5 是 一 款 无 须 下 载 的 HS 设计 开发 工具 ， 采 用 了 物理 引擎 、 数 据 库 、 直 播 流 、SVG、WebApp、 多 
屏 互动 等 技术 ， 为 用 户 带 来 一 站 式 的 WebApp 平 台 解 决 方案 。iH5S 还 被 用 于 这 些 领 域 ， 如 图 2-13 所 示 。 


HD.c 


iH5 还 被 用 于 这 些 领 域 


图 2-13 ”iH5 的 应 用 领域 
iH5 的 制作 页 面 与 PS 比较 类 似 ， 如 图 2-14 所 示 。 
在 iH5 的 制作 页 面 中 最 右边 是 对 象 树 ， 它 相当 于 Photoshop 软 件 中 的 图 层 。 在 对 象 树 中 ， 包 括 图 
片 、 视 频 、 序 列 帧 等 素材 元 素 ， 页 面 、 对 象 组 等 容器 元 素 ， 以 及 时 间 轴 、 数 据 库 等 功能 性 元 素 ， 这 些 
都 是 构成 H5 的 基本 元 素 。 这 些 对 象 以 树 形 的 结构 层 层 组 织 在 一 起 ， 就 构成 了 H5 的 骨架 。 当 然 ， 要 搭建 
这 个 骨架 ， 我 们 需要 用 到 最 左边 的 工具 栏 ， 其 功能 也 与 Photoshop 中 的 工具 箱 类 似 ， 可 以 用 来 创建 H5 中 
的 各 种 对 象 ， 像 Photoshop 绘 图 一 样 来 制作 HS5。 


Photoshop 
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图 2-14 ”iH5 的 制作 页 面 


2.1.5 人 人 秀 : 无 代码 的 H5 制 作 工具 


人 人 秀 (rrxiu.net) 可 以 帮助 用 户 制作 各 种 H5 微 场景 、 在 线 表 单 、 微 信 红 包 、 微 信 投 票 、 创 意 海 
报 、 微 杂志 、 微 信 邀 请 图 、 场 景 应 用 、 微 信 贺 卡 ， 即 使 是 不 懂 设 计 、 不 会 编程 的 新 手 ， 也 可 以 快速 上 
手 ， 其 主页 如 图 2-15 所 示 。 


一 站 式微 信 活 动 服 务 平台 
企业 用 户 正在 使用 


免费 使 用 


强大 的 短信 活动 功能 


H5 在 线 短信 
微 场景 ” 表单 红包 


图 2-15 人 人 郁 (rrxiu.net ) 的 主页 


人 人 秀 的 主要 优势 和 特点 如 图 2-16 所 示 。 


图 2-16 人 人 秀 的 主要 优势 和 特点 
人 人 和 郁 的 “产品 中 心 ” 提 供 了 100 多 种 广告 插件 ， 如 微 信 红包 、 大 转盘 抽奖 、 照 片 投票 、VR 全 
景 、 微 信 卡 券 、 问 卷 调查 、 小 游戏 等 ， 用 户 通过 简单 的 拖 电 操 作 ， 即 可 轻松 调用 这 些 插 件 ， 实 现 更 好 
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的 广告 功能 。 人 人 秀 的 “产品 中 心 ” 页 面 如 图 2-17 所 示 。 


图 2-17 人 人 秀 的 “产品 中 心 ” 页 面 
在 “模板 商店 ”页 面 中 ， 人 人 秀 按照 HS 的 用 途 、 行 业 、 功 能 和 活动 费用 进行 分 类 ， 导 航 功 能 非常 
全 面 、 清 晰 ， 而 且 还 支持 自由 搜索 功能 ， 如 图 2-18 所 示 。 同 时 ， 针 对 新 用 户 还 提供 了 免费 领取 VIP 的 福 
利 ， 极 大 地 增加 了 对 用 户 的 吸引 力 。 


图 2-18 人 人 秀 的 “模板 商店 ”页 面 
在 “作品 秀 ” 页 面 中 ， 列 出 了 很 多 互联 网 、 影 视 、 银 行 、 航 空 、 家 电 、 学 校 等 不 同行 业 的 优秀 企 
业 H5 广 告 方案 ， 如 华为 、 腾 讯 、 百 度 、 阿 里 巴巴 、 口 碑 网 、 爱 奇 艺 、 网 易 等 ， 帮 助 大 家 更 好 地 了 解 和 
学 习 这 些 企 业 的 广告 特色 ， 如 图 2-19 所 示 。 


企业 用 户 


见 认 识 的 品 黎 都 在 使 用 人 人 秀 


和 
Tencenrgg 。。 Bai 代 百 度 LE2 呢 EE 


图 2-19 人 人 秀 的 “ ‘作品 秀 ” ee 


ps ee a 
二 家 指点 ) 4 打分 ， 人 人 秀 系统 将 会 从 作品 丰富 度 、 功 能 丰富 度 、 作 品 安全 性 、 浏 览 流畅 度 、 版 
。 权 完整 度 等 多 个 方面 对 作品 进行 综合 测评 ， 助 你 更 好 地 修改 和 完善 作品 。 


Photoshop 
H5 广 告 设计 


2.1.6 易 企 秀 : H5 场 景 定制 工具 


易 企 秀 提供 了 海量 的 H5 场 景 模板 ， 可 以 帮助 用 户 轻 松 制作 H5 页 面 ， 其 主页 如 图 2-20 所 示 。 


2O18 年 企业 寿 查 招聘 拘 南 


呈正 青 志 忆 


场景 制 { 2 
ee 易 企 秀 是 什么 |_ |e, er i 富 方 APP 下 载 H5 场 景 定制 找 秀 客 


图 2-20 史 企 秀 主 页 


易 企 秀 的 主要 优势 和 特点 如 图 2-21 所 示 。 


图 2-21 i 企 秀 的 主要 优势 和 特点 


1. 易 企 秀 的 特殊 功能 

下 面 对 易 企 秀 中 的 一 些 特殊 功能 进行 介绍 。 

1) 自 定 义 加 载 LOGO 功 能 

用 户 可 以 将 载 入 HS 场景 时 的 易 企 秀 LOGO， 蔡 换 为 企业 品牌 LOGO 或 自 定 义 图 片 ， 生 动 传播 第 一 
印象 ， 彰 显 品牌 实力 。 

2) 具有 独立 域名 

包括 自 定义 场景 链接 、 优 化 爬虫 结果 、 占 领 搜索 引擎 高 地 。 

3) 去 尾 页 标识 

去 除 场 景 默认 尾 页 提示 ， 加 强 传播 内 容 整体 性 ， 从 而 更 好 地 突出 品牌 概念 。 
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4) 场景 保障 服务 

易 企 秀 具有 独立 场景 服务 器 及 CND 加 速 服务 ， 让 H5 场 景 的 访问 更 迅速 、 更 稳定 ， 全 面 保障 传播 
路 径 。 

5) 场景 审核 服务 

双重 审核 机 制 辅助 规避 传播 平台 内 容 限 制 风 险 ， 并 且 具 有 场景 前 置 审核 、 审 核 关 闭 短信 提醒 、 驶 
回 加 急 审 核 等 功能 。 

6) VIP 专属 私人 服务 

包括 专 享 客服 热线 及 会 员 培 训 等 ， 高 效 解决 H5 制 作 及 其 他 使 用 问题 。 

2. 易 企 秀 的 其 他 功能 

如 图 2-22 所 示 ， 这 是 易 企 秀 的 “免费 模板 ”页 面 ， 具 有 完善 的 导航 功能 和 搜索 功能 ， 同 时 模板 的 
热点 性 非常 强 ， 使 用 体验 非常 好 。 

除了 H5 模 板 外 ， 易 企 秀 还 提供 了 较为 完整 的 移动 互联 网 广告 投放 平台 ， 包 括 腾 讯 联盟 广告 、 公 众 
号 广告 、 朋 友 圈 广告 、APP 广 告 等 ， 如 图 2-23 所 示 。 


OO 易 企 租 广告 投放 平台 
入 广 方 寄 广告 情 红 投 二 尝 园 三 三 册 是。 SB 外 于 90 。 刘 购 中 


二 


村 选 阁 潮流 量 资产， 打造 族 / 心 投 放 平台 


图 2-22 易 企 秀 的 “免费 模板 ”页 面 图 2-23 ” 细 企 秀 的 广告 投放 平台 
另外 ， 易 企 秀 还 借鉴 了 自 媒 体 的 运营 模式 ， 加 入 “ 秀 场 ”“ 秀 客 ” 等 平台 ， 帮 助 优秀 的 H5 设 计 师 
聚集 粉丝 ， 吸 引 企业 关注 ， 增 加 收入 ， 如 图 2-24 所 示 。“ 秀 客 ” 是 指 那些 在 “ 秀 场 ” 平 台 上 展示 高 端 
H5 场 景 的 设计 师 以 及 各 种 广告 、 代 理 等 服务 商 ， 解 决 企业 的 广告 场景 定制 服务 需求 。 
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图 2-24 易 企 秀 的 “ 秀 客 ”平台 
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“ 秀 客 ”的 HS 作品 多 为 原创 ， 而 且 其 中 必须 加 入 一 类 定制 场景 ， 如 企业 广告 、 招 聘 信 息 、 企 业 品 
牌 故事 、 产 品 推广 信息 、 企 业 故 事 或 者 易 企 秀 官方 活动 场景 等 。 


基于 应 用 软件 的 H5 设 计 工具 


由 于 HTML5 的 迅速 发 展 ， 现 已 逐渐 成 为 涵盖 领域 最 广 的 一 种 传播 媒介 ， 正 因为 如 此 ， 其 所 涉及 
的 设计 工具 种 类 也 十 分 庞杂 。 伴 随 着 H5 的 兴起 ， 多 数 H5 的 设计 师 部 是 从 其 他 相关 行业 跨 入 这 个 领域 
的 。 因 为 专业 的 H5 生 成 平台 存在 同 质 化 ， 很 难 做 出 理想 的 效果 ， 所 以 即使 是 有 设计 功底 的 设计 师 ， 
也 需要 根据 目 身 的 优势 来 选择 工具 进行 学 习 与 制作 ， 从 而 达到 想 要 的 H5 效 打 。 

目前 H5 设 计 领 域 还 没有 统一 的 设计 工具 ， 需 要 搭配 多 种 软件 来 设计 制作 。 下 面 列举 常用 的 设计 
工具 。 


2.2.1 Photoshop: 图 形 图 像 设 计 工具 


Photoshop 在 Adobe 的 产品 线 中 是 个 极为 强大 的 综合 应 用 软件 ， 对 于 每 个 设计 师 来 说 都 不 会 陌生 。 
伴随 着 H5 的 兴起 ， 设 计 师 们 逐渐 发 现在 H5 领 域 ， PS 可 以 称 为 “万 能 工具 ”。 以 往 Photoshop 和 常常 用 于 
天 量 图 像 的 绘制 ， 以 及 图 像 处 理 ， 对 声音 或 视频 之 类 的 编辑 处 理 都 是 不 可 能 完成 的 ， 但 当 Photoshop 
CC 发 布 之 后 ， 其 新 增 的 “时 间 轴 ”功能 ， 使 得 PS 不 但 可 以 用 于 矢量 图 像 的 绘制 ， 而 且 还 能 够 对 视频 和 
声 首 进行 编辑 ， 可 以 添加 一 定 难 度 的 动 效 和 简单 的 特效 命令 ， 而 恰好 这 些 基 本 的 操作 束 可 以 满足 设计 
HS 的 第 规 需求 。 


在 Photoshop CC 2018 的 工作 界面 中 ， 默 认 情 况 下 “时 间 轴 ”面板 是 隐藏 的 ， 
用 户 需 选择 “窗口 ”|“ 时 间 轴 ”人 命令， 显示“ 时 间 轴 ”面板 。 
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2.2.2 jlustrator: 专业 的 矢量 图 绘制 工具 
Illustrator 在 Adobe 的 产品 线 中 、 甚 至 在 全 球 ， 都 是 最 著名 的 天 量 图 形 绘 制 软件 。 与 Photoshop 不 同 

的 是 ， 作 为 专业 的 矢量 图 形 绘制 软件 ，AI 在 HS 的 设计 上 便于 线 框 图 的 绘制 ， 同 时 弥补 了 Photoshop 多 

图 层 来 回 操 作 的 烦琐 ， 同 时 AI 的 使 用 能 够 让 HS 页 面 的 字体 设计 展现 很 强 的 优势 。 

如 图 2-26 所 示 ， 这 是 Adobe Illustrator CC 2018 的 启动 界面 。 
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图 2-26 Adobe Illustrator CC 2018 的 启动 


界面 


2.2.3 After Effects: 制作 酷 炫 的 视频 特 交 


After Effects 是 Adobe 公 司 推出 的 一 款 图 形 视 频 处 理 软 件 。AE 可 以 创建 各 种 引 人 注 目的 动态 图 形 和 
震撼 的 视觉 效果 ， 为 HS 页 面 添加 令 人 耳目 一 新 的 效果 ， 属 于 视频 后 期 处 理 软件 。 
如 图 2-27 所 示 ， 这 是 Adobe After Effects CC 2018 的 启动 界面 。 


图 2-27 Adobe After Effects 2018 的 启动 界面 
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2.2.4 CINEMA 4D: 专业 的 三 维 软 件 工 具 


Cinema 4D 意 指 “4D 电影 ”， 但 其 软件 本 身 是 3D 表 现 ， 拥 有 极 高 的 运算 速度 和 强大 的 泻 染 插件 ， 
是 由 德国 Maxon Computer 公 司 开 发 的 。 


图 2-28 所 示 为 用 CINEMA 4D 制 作 的 演 染 图 。 
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图 2-28 ”CINEMA 4D 制 作 的 泻 染 图 


ver 


和 下 家 指点 ) AE 和 C4D 是 包装 设计 行业 中 最 好 的 搭配 ， 由 于 H5 的 跨 平 台 特性 ， 我 们 可 以 结 
“过 综 铀 也 ， 合 这 些 特效 软件 制作 出 六 酷 的 效果 ， 然 后 导出 画面 植 入 HS 中 ， 但 这 两 个 工具 属于 
。 特殊 H5 需 要 使 用 的 辅助 软件 ， 建 议 选 择 性 学 习 。 


2.2.59 ”随身 录 首 军 : 歼 码 音乐 创作 软件 


尽管 这 些 年 H5 的 势头 一 直 在 持续 增长 ， 但 大 多 数 H5 对 于 音效 、 视 频 的 要 求 并 不 高 ， 暂 且 利 用 PS 
的 简单 功能 就 能 达到 演示 效果 ， 但 伴随 着 H5 的 进步 ， 要 求 也 会 逐渐 变 高 ， 那 么 设计 师 就 得 掌握 一 些 专 
业 性 更 强 的 工具 。 而 随身 录音 室 ， 又 叫 Garage Band， 是 Mac 系 统 上 的 一 款 音乐 制作 软件 ， 能 够 在 剪辑 
音频 的 基础 上 深入 编辑 ， 对 音频 方面 的 修改 和 编辑 是 非常 实用 的 。 

图 2-29 所 示 为 随身 录音 室 一 一 Garage Band 的 应 用 工作 界面 。 
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图 2-29 ”随身 录音 室 一 一 Garage Band 的 应 用 工作 界面 


H5 设 计 的 吊 用 工具 


2.2.6 HYPE: HTML5 动 画 制 作 利器 


HYPE 是 一 款 适 用 于 Mac 操 作 系 统 的 HTML5 创 作 工具 ， 主 打 H5 设 计 的 
移动 端 软 件 ， 擅 长 在 网 页 上 做 出 悦目 的 动画 效果 。 其 不 仅 包 含 动 效 功能 ， 
还 加 入 了 时 间 轴 和 动力 学 模块 这 样 的 高 级 命令 ， 同 时 可 以 将 H5 页 面 直 接 
生成 代码 ， 以 及 可 以 进行 自主 响应 式 设计 。 

图 2-30 所 示 为 HYPE 软 件 的 应 用 图 标 。 


图 2-30 HYPE 的 应 用 图 标 


2.2.7 其 他 : H5 设 计 吊 用 的 辅助 工具 


随 着 H5 的 发 展 ， 页 面 的 要 求 水 准 也 越 来 越 高 ， 通 常设 计 一 份 好 的 H5 除 了 要 用 一 些 常 用 的 设计 工 
具 以 外 ， 辅 助 工 具 也 是 必 不 可 少 的 。 下 面 介 绍 几 种 设计 H5 时 常用 的 辅助 工具 。 

1. 声音 /视频 压缩 工具 

作为 一 个 便携 性 、 小 容量 的 HS 页面， 视频 、 音 效 的 添加 大 小 也 受到 了 限制 ， 过 大 的 视频 音效 会 导 
致 整个 页 面 数据 过 于 庞大 ， 加 载 绥 慢 ， 这 时 就 要 用 到 音频 、 视 频 压 缩 工具 。 通 常 我 们 会 使 用 PC 的 格式 
工厂 、Mac 的 Video Converter 和 Garage Band〈 随 映 录音 室 ) 等 小 工具 压缩 音 视频 ， 植 入 HS 页面 。 

图 2-31 所 示 为 格式 工厂 的 工作 界面 。 


图 2-31 格式 工厂 的 工作 界面 


二 二 中 作用 范围 不 只 是 压缩 音频 ， 还 可 以 对 不 同 页 面 使 用 的 音频 进行 相对 
-) 格式 工厂 的 作用 范围 不 只 是 压缩 音频 ， 还 可 以 对 不 同 了 \ 
这 指 虑 /4 站 转换， 方便 页 面 加 载 音频 。 : 


2. 图 片 压缩 工具 
图 片 的 大 小 与 音频 、 视 频 的 大 小 存在 一 样 的 问题 ， 都 需要 对 过 大 的 文件 进行 压缩 才能 植 入 H5 页 
面 。 在 H5 的 设计 过 程 中 ， 最 常用 的 图 片 压缩 网 站 是 : https:/Wtinypng.com/， 以 及 一 款 腾 讯 出 品 的 压缩 工 


具 平 台 : 智 图 (http://zhitu.isux.us/) 。 


图 2-32 所 示 为 TinyPNG 网 站 的 页 面 。 
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图 2-32 TinyPNG 网 站 的 页 面 
3. 二 维 码 生成 工具 
随 着 H5 的 演变 ， 其 已 经 成 为 涵盖 领域 非常 广泛 的 一 种 传播 媒介 ， 大 多 数 H5 也 成 为 广告 推广 的 一 
个 平台 ， 那 么 在 作为 一 个 广告 推广 页 面 时 ， 主 页 的 企业 集团 二 维 码 是 必 不 可 少 的 。 很 多 互联 网 公司 正 
是 发 现 了 这 一 点 ， 从 而 推出 了 非常 多 的 二 维 码 生成 工具 ， 比 较 常 用 的 工具 有 : 微微 、 草 料 等 ， 但 有 一 
部 分 高 级 功能 是 需要 收费 使 用 的 。 
图 2-33 所 示 为 微微 在 线 二 维 码 生成 器 的 网 站 页 面 。 
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图 2-33 ”微微 在 线 二 维 码 生成 器 的 网 站 页 面 
4. PS Play 
大 多 数 简单 的 HS 效果 都 是 用 Adobe Photoshop CC 制作 出 来 的 ， 但 因为 PC 端 软 件 的 限制 及 不 易 便携 
性 ， 从 而 演化 出 了 手机 端 能 够 方便 浏览 Photoshop 设 计 效 果 的 移动 软件 一 一 PS Play， 同 时 该 软件 还 可 以 
在 预览 设计 效果 时 ， 同 步调 试 并 截图 保存 到 手机 端 ， 并 直接 运用 微 信 、Email 等 工具 进行 分 享 。 
图 2-34 所 示 为 PS Play 网 站 的 页 面 。 


图 2-34 PS Play 网 站 的 页 面 
在 PS Play 网 站 页 面 中 ， 提 供 了 多 种 不 同 移动 端的 下 载 方 式 ， 以 及 如 何 操作 使 用 它 的 图 文教 程 。 


吊 2 草 ”HH5 设 计 的 帅 用 工具 


选择 H5 的 工具 组 合 形式 


在 H5 的 设计 过 程 中 ， 根 据 设计 要 求 的 类 别 ， 设 计 师 可 以 选取 针对 性 强 且 自 身 能 够 掌握 的 工具 进行 
组 合 搭配 设计 ， 从 而 大 大 提高 工作 效率 ， 并 完成 所 需要 的 效果 ， 达 到 高 效 、 精 确 。 下 面 详细 介绍 如 何 
正确 选择 H5 的 工具 组 合 形式 。 


2.3.1 选择 开 友 类 HD 工具 


在 制作 需要 开发 的 设计 案例 时 ， 根 据 设计 要 求 的 简易 程度 ， 我 们 可 以 采用 两 种 不 同 的 组 合 形式 来 
搭配 设计 。 

如 果 设 计 要 求 常 规 简 单 ， 可 以 采用 Photoshop 十 Keynote/PowerPoint (PPT) 的 组 合 搭配 形式 。PS 
负责 用 来 设计 画面 及 元 素 ，Keynote/PowerPoint (PPT) 负责 用 来 做 演示 ， 并 与 前 端 工程 师 沟 通 。 

Keynote 是 2003 年 由 苹果 公司 推出 的 适用 于 Mac 操 作 系 统 的 一 球 演示 幻灯 片 应 用 软件 ， 与 PowerPoint 
(PPT) 不 同 的 是 ， 这 于 软件 能 够 使 页 面 和 设计 更 图 形 化 ， 因 其 操作 简单 ， 功 能 繁多 ， 很 多 BAT〈 指 
百度 、 阿 里 巴巴 、 腾 讯 这 3 家 大 型 互联 网 公司 〉 这样 的 知名 企业 都 在 用 ， 以 及 苹果 公司 自身 的 WWDC 
开发 者 大 会 都 是 采用 Keynote 进 行 效果 演示 。 但 秉承 着 苹果 一 贯 的 风格 ， 这 球 软 件 只 有 Mac 系 统 可 以 使 
用 ， 如 果 是 PC 用 户 则 可 以 使 用 PowerPoint (PPT) 来 做 辅助 的 效果 演示 。 

PowerPoint， 全 称 为 Microsoft Office PowerPoint， 可 简写 为 PPT， 是 由 微软 公司 开发 的 一 款 演示 
文稿 软件 ， 而 使 用 PPT 做 出 来 的 东西 就 叫 作 演示 文稿 ， 其 中 俗称 的 “ 约 灯 片 ” 就 是 演示 文稿 中 的 页 
面 ， 演 示 文 稿 可 以 在 投影 仪 或 计算 机 上 进行 演示 ， 也 可 以 打印 制作 成 胶片 应 用 到 更 广泛 的 领域 。 

Keynote/PowerPoint 《PPT)》 可 以 说 是 最 简单 的 原型 演示 工具 ， 如 图 2-35 所 示 。 

如 果 设 计 要 求 非常 复杂 ， 除 了 俐 单 的 画面 及 元 素 
外 ， 还 要 添加 视频 、 特 效 、 音 效 时 ， 可 以 采用 Photoshop 


十 Hiustrator 十 Final Cut Pro/Garage Band/Premiere+ Keynote/ i K eynote /PPT 
PowerPoint (PPT) 的 组 合 搭配 形式 。 最 简单 的 原型 演示 工具 


Photoshop 和 Illustrator 负 责 设计 画面 和 字体 ; Final 
Cut Pro/Garage Band/Premiere 负 责 完 成 视频 、 声 音 的 剪 
辑 ，Keynote/PowerPoint (PPT) 负责 做 演示 ， 并 与 前 图 2-35 Keynote/PowerPoint ( PPT ) 
端 工程 师 沟 通 。 

Final Cut Pro 是 苹果 公司 开发 的 一 球 专 业 视 频 非 线 性 编辑 软件 ， 其 包含 进行 后 期 制作 所 需 的 一 切 功 
能 。 如 果 您 是 苹果 用 户 ， 推 荐 使 用 Final Cut Pro， 学 习 成 本 相对 较 低 。 

Premiere， 全 称 Adobe Premiere， 人 简称 PR， 是 由 Adobe 公 司 推出 的 一 款 常 用 的 视频 编辑 软件 ， 有 具有 
较 好 的 兼容 性 ， 可 以 与 Adobe 其 他 产品 线 的 软件 相互 协作 ， 同 时 易学 、 高 效 、 精 确 的 优点 ， 使 其 成 为 
视频 剪辑 时 的 不 二 选择 ， 也 是 PC 用 户 的 黄金 搭档 。 

如 图 2-36 所 示 ， 这 是 Premiere Pro CC 2018 的 工作 界面 。 
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图 2-36 ”Premiere Pro CC 的 工作 界面 


2.3.2 ”选择 网 站 类 H5 工 具 


对 于 网 站 类 HS5， 内 容 表 现 简 单 时 ， 可 以 采用 Photoshop 十 HS 模板 工具 网 站 的 组 合 搭配 形式 。 
Photoshop 负 责 完 成 设计 男 面 ， 并 存 成 PNG 格 式 图 片 ， 然 后 上 传 到 HS 模板 工具 网 站 ， 利 用 网 站 来 生 
成 H5。 

在 内 容 表 现 复杂 时 ， 我 们 可 以 采用 Photoshop 十 Illustrator 十 Final Cut Pro 十 HS 模板 工具 人 
搭配 形式 。Photoshop 十 llustrator 负 责 设计 需要 分 层 的 PNG 图 ，Final Cut Pro 负 责 制 作 所 需 的 音频 、 

频 ， 最 后 通过 H5 模 板 工具 网 站 来 生成 最 终 的 效果 。 


2.3.3 ”利用 手机 制作 H5 


随 着 时 代 进步 ， 智 能 手机 已 经 成 为 大 众 使 用 的 普遍 工具 ， 而 H5 的 主要 载体 便 是 智能 国电 旺 六 
手机 。 除 了 在 智能 手机 端 浏览 H5 成 为 一 种 需求 外 ， 用 手机 制作 H5 也 已 成 为 H5 发 展 的 一 个 扫 码 看 视频 
冯 势 ， 众 多 Hs 制作 平台 纷纷 推出 手机 端 币 作 HS。 例 如 ， 人 人 秀 推 出 的 小 程序 制作 工具 便 能 够 和 好 地 解决 
在 手机 端 制作 HS 的 用 户 需 求 。 RCR 

下 面 介绍 通过 人 人 秀 小 程序 制作 H5 页 面 的 方法 。 其 操作 步骤 如 下 。 


e STEP 01 打开 手机 端 微 信 程 序 ， 关 注 “ 人 人 秀 ” 微 信 公 众 号 ， 进 入 公 ee 
众 号 界面 ， 单 击 页 面 下 方 的 “点 我 制作 ”按钮 ， 如 图 2-37 所 示 。 A 
e STEP 02 跳 转 到 人 人 秀 “ 立 即 制作 ”界面 ， 在 “立即 制作 ”界面 中 ， -nh 
单 击 “ 踏 青 出 游 ”模板 ， 如 图 2-38 所 示 。 0 
9 STEP 03 跳 转 到 模板 预览 界面 ， 单 击 界面 下 方 的 “立即 制作 ”按钮 ， 网 aas 
如 图 2-39 所 示 。 [4] 发 红包 教程 


【5】 照片 投票 教程 
D 人 蔷 


9 STEP 04 进入 H5 模 板 制作 界面 ， 单 击 中 间 的 文本 预览 框 ， 修 改 文本 的 
内 容 ， 如 图 2-40 所 示 。 

9 STEP 05 回 左 滑动 屏幕 ， 进 入 第 二 个 界面 ， 在 其 中 可 以 修改 模板 的 相 
册 图 集 ， 修 改 完成 后 单 击 下 方 的 “保存 ”按钮 ， 如 图 2-41 所 示 。 图 2-37 人 人 秀 微 信 公众 号 界面 
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@ STEP 06 弹出 信息 框 ， 可 以 在 其 中 更 改 封面 图 片 、 修 改 标题 内 容 等 ， 单 击 “保存 ”按钮 ， 如 图 2-42 所 示 。 
9 STEP 07 执行 操作 后 ， 即 可 发 布 制作 的 HS 页 面 ， 在 “分 享 到 ”下 方 提供 了 3 种 分 享 方式 ， 用 户 可 将 H5 
页 面 分 享 到 微 信 或 生成 海报 ， 如 图 2-43 所 示 。 


VR 全 景 邀 请 函 踏青 旅游 洲 请 .. SA “ 江 边 第 家 要 ， 回 章 见 入 可 * 
趟 “ 满 当 杨柳 绿 如 出 ， 惠 出 清明 三 月 天 " 
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图 2-41 相册 图 集 页 面 图 2-42 ”信息 框 内 容 修 改 图 2-43 发布 分 享 H5 页 面 


ET ER ”在 人 人 秀 微 信 小 程序 制作 完成 的 H5 页 [ 面 ， 可 以 在 完成 设计 保存 时 跳 转 到 的 页 : 
: < i ， 也 可 单 击 “这 回 我 的 作品 ” 接 乌 ， 跑 针 至 “我 的 作 
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由 于 HS 页 面 的 广泛 应 用 ， 很 多 大 小 企业 都 在 争 相 用 HS 盈利 ， 但 对 于 没有 
设计 功底 的 用 户 ， 如 何 制作 出 一 种 自己 需要 的 H5 页 面 呢 ?本 章 主 要 介绍 H5 设 
计 的 基本 操作 ， 包 括 如 何 生产 HS$、 在 HS 页 面 中 添加 各 种 元 素 等 。 


如 何 “ 生 产 ”H5 
在 H5 页 面 中 添加 各 种 元 素 
为 设计 加 分 的 4 个 要 点 


Gr -a 
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补 3 草 ”HH5 设 计 的 基本 操作 


如 何 “ 生 产 ”H5 


当 需 要 H5 页 面 来 推广 广告 或 制作 场景 时 ， 总 会 想到 如 何 生 产 H5? 如 何 制作 出 H5 效 果 ? 简单 来 
说 ，H5 的 页 面 就 是 将 图 片 、 文 字 、 动 画 、 声 首 、 视 频 等 素材 融合 在 一 起 来 表达 想 要 推广 广告 的 效果 以 
及 场景 。 接 下 来 便 简 单 介 绍 如 何 使 用 H5 创 作 平 台 一 一 蜂巢 ME 来 “生产 ”HS5。 


3.1.1 选择 平台 和 进行 登录 


在 浏览 髓 网 址 处 输入 www.agoodme.com 网 址 ， 进 入 蜂 虽 ME HS 创作 平台 后 ， 在 主页 右上 角 单 击 
“登录 LOGIN ”或 “注册 SIGN UP” 按 钮 ， 己 注册 的 用 户 可 以 登录 账号 进入 页 面 ， 未 注册 的 用 户 可 以 
利用 手机 号 进行 注册 登录 ， 或 可 以 直接 使 用 第 三 方 登录 ， 比 如 QQ、 微 博 以 及 微 盟 账号 。 

如 图 3-1 所 示 ， 这 是 蜂巢 ME 平台 网 站 主页 。 


品牌 合作 案例 
图 3-1 蜂 业 ME 平台 网 站 的 主页 


3.1.2 ”选择 模板 


在 页 面 项 部 单 击 “场景 创作 ”按钮 ， 进 入 “选择 创作 场景 ”页 面 ， 如 图 3-2 所 示 。 


图 3-2 “选择 创作 场景 ”页 面 


Photoshop 
HD 广 告 设 计 


在 页 面 上 方 的 场景 或 者 下 方 的 模板 分 类 中 选择 合适 的 场景 模板 ， 如 图 3-3 所 示 。 


图 3.3 ”模板 分 类 
如 场景 中 的 “企业 宣传 ”、 模 板 分 类 中 的 “商业 ”， 可 以 通过 鼠标 单 击 所 需要 的 选项 或 者 扫描 二 
维 码 ， 跳 转 页 面 得 到 模板 的 预览 效果 ， 如 图 3-4 所 示 。 
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图 3-4 ”模板 预览 页 面 


3.1.3 布局 页 面 


单 击 “ 选 择 创作 场景 ”页 面 中 的 “ 目 由 制作 ”按钮 ， 进 入 目 由 制作 面 面 ， 该 页 面 分 为 4 个 区 域 ， 
左 侧 为 管理 区 域 ， 顶 部 为 工具 栏 区 域 ， 中 间 为 制作 页 面 编 辑 区 域 ， 右 侧 是 编辑 页 面 区 域 。 图 3-5 所 示 为 
目 由 制作 页 面 。 


图 3-5 自由 抽 作 页 面 
左 侧 的 管理 区 域 有 页 面 管理 、 版 式 库 、 组 件 库 三 大 功能 选项 。 其 中 页 面 管 理 功 能 中 包含 制作 页 面 的 
缩 略 显示 效果 ， 以 及 添加 页 、 添 加 组 、 复 制 、 删 除 、 重 命名 、 蔡 换 版 式 几 个 功能 按钮 ， 如 图 3-6 所 示 。 
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制作 页 面 的 缩 略 显示 


图 3-6 ”管理 区 域 
顶部 的 工具 栏 区 域 中 有 图 片 、 文 本 、 边 杠 、 水 印 、 图 形 、 音 乐 、 视 频 、 表 单 等 工具 按钮 ， 如 图 3-7 
所 示 。 


图 3-7 工具 栏 区域 
中 间 为 制作 页 面 编辑 区 域 ， 在 底部 可 以 用 鼠标 拖 动 调整 页 面 高 度 ， 进 行 局 部 页 面 的 调整 ， 制 作 长 
页 面 等 ， 如 图 3-8 所 示 。 
右 侧 的 编辑 页 面 区 域 中 包含 大 量 的 设置 参数 栏 ， 以 及 一 些 功能 按钮 ， 例 如 撤销 、 恢 复 、 复 制 、 载 
剪 、 锁 定 等 ， 如 图 3-9 所 示 。 


图 3-8 制作 页 面 编 辑 区 域 图 3-9 ”编辑 页 面 区 域 


添加 和 编辑 图 片 


单 击 项 部 工具 栏 中 的 “图 片 ”按钮 ， 在 弹出 的 列表 框 中 可 以 选择 “图 片 ”选项 或 “背景 ”选项 。 
“图 片 ” 是 可 移动 编辑 性 的 图 屋 ， 而 “背景 ”是 一 张 固定 不 能 修改 的 图 层 。“ 图 片 ”及 “背景 ”可 以 
选择 图 片 库 中 的 图 片 ， 也 可 以 单 击 “ 添 加 图 片 ”按钮 上 传 图 片 。 


Photoshop 


H5 厂 告 设计 


选择 “图 片 ” 选 项 后 ， 在 弹出 的 对 话 框 中 可 以 上 传 自己 的 图 片 或 选取 平台 自 带 图 片 库 中 的 图 片 ， 
如 图 3-10 所 示 。 选 取 图 片 后 ， 单 击 “ 确 定 ” 按 钮 ， 会 在 制作 页 面 编辑 区 域 生 成 图 片 ， 在 右 侧 的 编辑 页 
面 区 域 可 以 设置 图 片 的 相关 属性 ， 包 括 元 素 名 称 、 尺 寸 、 位 置 、 不 透明 度 、 旋 转角 度 、 边 框 尺 寸 等 ， 
如 图 3-11 所 示 。 


图 3-10 ”添加 图 片 图 3-11 图 片 设置 


添加 和 编辑 文本 元 系 


人 @ 单 击 顶 部 工具 栏 中 的 “文本 ”按钮 ， 在 弹出 的 列表 框 中 可 以 选择 “标题 ”选项 或 “正文 ”选项 ， 
如 图 3-12 所 示 ; @ 单 击 “ 标 题 ” 选 项 后 ， 会 在 制作 页 面 编辑 区 域 中 目 动 生成 一 个 可 编辑 的 文本 框 ， 在 右 
侧 的 编辑 页 面 区 域 中 可 以 设置 文本 样式 ， 包 括 字 体 、 字 号 、 字 体 颜 色 、 字 间距 等 ， 如 图 3-13 所 示 。 


图 3-12 “文本 ”列表 框 图 3-13 文本 样式 设置 


3.1.6 ”添加 动画 元 么 


动画 效果 是 HS 页面 必 不 可 少 的 一 个 组 成 部 分 ， 而 在 蜂 划 ME 创 作 平 台中 ， 动 画 效果 需 在 制作 页 面 
编辑 区 域 中 选中 所 需 设 置 的 元 素 ， 然 后 在 右 侧 的 编辑 区 域 中 便 可 以 选择 动画 选项 ， 设 置 各 类 不 同 的 参数 。 

在 “动画 ”选项 卡 中 ， 各 主要 选项 的 合 义 如 下 : 

@ “动画 时 间 ” 是 指 动画 效果 的 播放 时 间 ， 可 以 拖 动 滑 块 设置 时 间 范 围 。 

@ “延迟 时 间 ” 是 指 动画 与 动画 小 效果 之 间 的 延 开 时 间 差 ， 可 以 拖 动 滑 块 进行 设置 。 

@ “动画 次 数 ” 是 指 动画 进行 播放 的 次 数 ， 单 击 “动画 次 数 ” 右 侧 的 下 三 角 按 钮 ， 可 展开 设置 
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次 数 ， 根 据 需 求 进行 选取 ， 如 图 3-14 所 示 。 

在 “动画 类 型 ”列表 框 中 ， 包 括 “ 进 入 ”“ 退 出 ”“ 强 调 ”3 种 类 型 ， 各 类 型 的 合 义 如 下 : 

@ “进入 ”动画 类 型 表示 图 片 或 文字 在 页 面 上 出 现时 的 动画 表现 效果 。 

@ “退出 ”动画 类 型 表示 页 面 切换 间 的 动画 表现 效果 。 

@ “强调 ”动画 类 型 一 般 用 于 增强 动画 效果 。 

在 每 种 类 型 下 方 ， 还 拥有 多 种 细节 动画 的 表现 方式 ， 可 以 根据 目 肌 需求 进行 选取 应 用 ， 如 图 3-15 
所 未 。 


上 方 注入 左 方 滑 入 ”有 方 滑 入 变 大 进入 


图 3-14 动画 选项 设置 图 3-15 动画 类 型 表现 


3.1.7 ”添加 首 乐 元 素 


@@ 单 击 项 部 工具 栏 中 的 “ 首 乐 ”按钮 ， 在 弹出 的 列表 框 中 可 以 选择 “背景 首 乐 ”选项 或 “音频 ” 
选项 。 背 景 音乐 在 用 户 打开 HS 页面 时 便 目 动 播 放 ， 但 音频 只 会 在 设 定 的 茶 个 页 面 打开 时 播放 ， 如 图 
3-16 所 示 ; 外 单 击 “背景 音乐 ”或 “音频 ”选项 ， 在 弹出 的 面板 中 可 以 选择 各 种 风格 的 音乐 进行 添 
加 ， 也 可 以 上 传 目 己 提 前 录制 的 音乐 或 音乐 库 中 没有 的 音乐 ， 但 音乐 格式 限制 为 MP3， 如 图 3-17 所 示 。 


图 3-17 音乐 面板 


添加 视频 元 系 


@@ 单 击 顶 部 工具 栏 中 的 “视频 ”按钮 ， 会 在 制作 页 面 编辑 区 域 中 自动 生成 一 个 视频 显示 框 ; 四 在 


加 


Photoshop 
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右 侧 的 编辑 区 域 中 ， 可 以 设置 视频 的 各 种 参数 : 尺寸、 位 置 、 不 通明 度 、 旋 转角 度 ， 可 以 目 由 蔡 换 视 
频 封 面 ， 添 加 的 视频 也 可 以 选择 本 地 视频 和 网 络 视频 ， 如 图 3-18 所 示 。 


ME 


图 3-18 ”添加 视频 及 视频 参数 
本 地 视频 可 以 单 击 “ 上 传 视频 文 件 ” 按 钮 ， 选 取 对 应 的 路 径 并 单 击 “确定 ”按钮 添加 ; 网 络 视 频 
则 需要 视频 通用 代码 ， 同 时 蜂巢 ME 制作 平台 支持 的 视频 格式 限制 为 优酷 、 土 豆 、 腾 讯 视频 。 在 右 侧 
的 编辑 区 域 中 选择 “网 络 视 频 ”， 单 击 下 方 的 “什么 是 视频 通用 代码 ? ” 赣 色 文字 ， 目 动 打开 并 进入 
如 图 3-19 所 示 的 网 页 界面 。 根 据 网 址 中 的 图 文 操作 便 可 获取 相对 应 的 视频 通用 代码 ， 并 会 在 蜂巢 ME 的 
自由 制作 页 面 右 侧 的 编辑 区 域 的 对 应 位 置 粘贴 通用 代码 。 


1 亿 项 网 
(1 ) 点 市 分 享 培 好 友 按 村 这 边 的 三 例 块 


(2) 点 二 引出 IE 下方 小 季 头 ， 复 逢 通用 
代 BE 可 


图 3-19 ”获取 视频 通用 代码 


添加 区 互 元 素 


交互 元 素 可 以 说 是 H5 页 面 必 不 可 少 的 一 部 分 ， 交 互 元 素 的 添加 可 以 让 整个 页 面 与 用 户 之 间 建 立 
交互 操作 ， 更 具 趣味 性 。 页 面 中 的 每 个 元 素 都 可 以 添加 交互 事件 ， 在 右 侧 的 编辑 区 域 中 ，@ 单 击 “ 交 
互 ” 按 钮 ， 展 开交 互 事件 的 编辑 页 面 ， 外 单 击 “ 添 加 事件 ”按钮 ， 为 当前 元 素 添加 交互 ， 如 图 3-20 
所 示 。 
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图 3-20 ”添加 元 素 交 互 ( 调 成 12 厘 米 宽 ) 
1. 设置 “触发 条 件 ” 
@ 单 击 “ 触 发 条 件 ” 右 侧 的 下 三 角 按钮 ， 展 开 选 项 ，@ 选 择 页面 所 需 的 触发 条 件 ， 如 单 击 、 长 
按 、 加 上 滑动 、 同 下 滑动 、 回 左 滑 动 、 回 右 滑动 ， 如 图 3-21 所 示 。 
2. 设置 “发 生 事件 ” 
@ 单 击 “ 发 生 事 件 ” 右 侧 的 下 三 角 按钮 ， 展 开 选 项 ，@ 选 择 页 面 触发 条 件 所 对 应 的 发 生 时 间 ， 如 
无 、 先 入 式 网 页 、 网 站 链接 、 页 内 导航 、 显 示 对 象 、 隐 藏 对 象 等 ， 如 图 3-22 所 示 。 


图 3-21 选择 触发 条 件 图 3-22 ”选择 发 生 事件 


3.1.10 添加 表单 和 组 件 


1. 添加 表单 
@ 单 击 项 部 工具 栏 中 的 “表单 ”按钮 ， 人 在 弹出 的 列表 框 中 可 以 选择 “快捷 表单 ”“ 输 入 
杠 ”“ 单 选 ”“ 多 选 ” 以 及 “提交 按钮 ”等 选项 ， 如 图 3-23 所 示 。 


图 3-23 ”添加 表单 
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2. 添加 表单 
@@ 单 击 目 由 制作 页 面 左 侧 的 组 件 库 ， 展 开 组 件 库 ; 人 可 以 选择 “基础 组 件 ” 和 “高 级 组 件 ” 两 种 
不 同 的 元 率 组 件 库 ， 如 图 3-24 所 示 。 


图 3-24 ”添加 组 件 


3.1.11 预 砚 作品 


单 击 目 由 制作 页 面 右上 角 的 “预览 ”按钮 ， 如 图 3-25 所 示 ， 便 可 以 对 制作 的 HS 页面 进行 预览 。 


图 3-2$ ”预览 作品 


3.1.12 上 友 布 作品 


确认 制作 页 面 无 误 之 后 ， 便 可 以 单 击 目 由 制作 页 面 右 上 角 的 “发 布 ”按钮 ， 并 弹出 如 图 3-26 所 未 
的 页 面 。 


图 3-26 发 布 作 品 
在 页 面 中 可 以 选择 性 地 设置 需要 的 内 容 ， 如 作品 封面 、 作 品名 称 、 作 品 描述 、 页 码 设置 、 目 录 设 
置 、 标 签 设置 ， 并 可 以 选择 作品 的 公开 性 和 弹 幕 评论 的 开关 。 
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设置 所 需 的 内 容 之 后 ， 单 击 页 面 右 下 角 的 “发 布 ”按钮 ， 作 品 发 布 后 ， 会 弹出 如 图 3-27 所 示 的 页 
面 ， 可 以 设置 同步 到 相关 的 平台 ， 如 微 博 、QQ、QQ 空 间 以 及 百度 贴吧 ， 还 能 直接 复制 作品 链接 或 二 
维 码 分 享 作品 。 


图 3-27 作品 发 布 分 享 


在 H5 页 面 中 添加 各 种 元 素 


在 H5 页 面 中 添加 各 种 元 素 ， 可 以 说 是 每 个 设计 师 在 设计 H5 页 面 时 都 会 进行 的 工作 。 在 页 面 中 添 
加 相关 的 元 素 ， 不 仅 可 以 增加 页 面 的 趣味 性 ， 还 可 以 使 用 户 与 界面 增加 更 多 的 交互 性 。 本 节 主 要 介绍 
在 H5 页 面 中 添加 各 种 元 系 的 操作 方法 。 


3.2.1 添加 弹 舌 元 么 


弹 幕 〈Barrage) 这 个 词 本 来 的 意思 是 指 “ 密 集 的 炮火 射击 ”， 如 今 ， 在 视频 中 经 常 可 以 看 到 大 量 以 
弹出 字幕 形式 显示 的 用 户 评 论 ， 这 种 形式 也 被 称 为 弹 磋 ， 它 可 以 给 人 们 和 带 来 一 种 “实时 互动 ”的 体验 。 

以 易 企 秀 为 例 ， 在 制作 HS 作品 时 ， 用 户 可 以 选择 是 否 开 局 踢 幕 功能 。 通 过 易 企 秀 H5 页 面 制作 工 
具 制 作 的 HS 作品 ， 可 以 单 击 确 部 的 留言 按钮 ， 输 入 相应 内 容 ， 以 弹 幕 的 形式 出 现在 HS 页面 中 ， 如 
图 3-28 所 示 。 


ii 中 国际 通 全 09-06 .| + 0906 
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图 3-28 添加 弹 幕 
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在 H5 页 面 中 加 入 弹 幕 ， 既 不 影响 用 户 的 观看 效果 ， 同 时 又 能 体现 出 热闹 的 气氛 ， 构 成 一 种 虚拟 的 
社 群 氛围 ， 可 以 为 品牌 市 来 较 强 的 宣传 效果 。 


rr 
四 


页 面 中 不 同 弹 幕 的 发 送 时 间 是 不 同 的 ， 但 在 页 面 中 的 特定 事件 点 或 者 时 间 、 
Ee 天仙 相间 发呆 同和 : 


3.2.2 ”添加 地 图 元 又 


目前 ， 根 据 热门 HH5 制 作 平 台 的 相关 数据 显示 ， 市 场 上 H5 应 用 得 最 多 的 场景 环 是 邀请 函 。 邀 请 函 
有 一 些 比 较 固定 的 信息 元 素 ， 那 就 是 通知 时 间 和 地 点 ， 而 地 图 则 是 展现 地 点 信息 的 最 佳 方式 。 通 过 在 
H5 邀 请 函 中 添加 地 图 插件 ， 甚 至 还 可 以 搜索 地 点 ， 让 大 家 对 活动 地 点 了 然 于 胸 ， 特 别 适 用 于 企业 招 
聘 、 亲 友 聚 会 、 婚 礼 庆典 等 线 下 活动 的 H5 邀 请 函 页 面 。 

以 人 人 秀 为 例 ， 打 开 人 人 秀 编 辑 器 ， 更 换 好 背景 。@ 单 击 “ 互 动 ”按钮 展开 其 操作 面板 ， 人 在 
“搜索 插件 ” 栏 中 输入 “地 图 ”; 全 选择 查找 到 的 “地 图 ”插件 ， 如 图 3-29 所 示 。 


@@ 单 击 


图 3-29 选择 “地 图 ”插件 
接 下 来 ，@ 在 弹出 的 窗口 中 输入 目标 地 点 ; @ 单 击 “ 搜 索 ” 按 钮 ， 找 到 正确 位 置 后 ， 合 单 击 “ 确 
定 ” 按 钮 保存 设置 ， 如 图 3-30 所 示 。 人 人 秀 提 供 的 地 图 默认 为 腾讯 地 图 ， 同 时 还 文 持 替换 为 访问 者 移 
动 端 所 安装 的 地 图 APP， 文 持 打 开外 部 地 图 进行 莹 换 。 
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图 3-30 在 地 图 上 选择 位 置 
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在 屏幕 的 右边 ， 选 中 “内 舱 地 图 ” 复 选 框 ， 在 操作 人 台 将 地 图 放大 ， 并 调整 至 合适 的 位 置 ， 如 


图 3-31 上 所 示 。 
如 果 不 选 中 “内 骸 地 图 ” 复 选 杠 ， 则 在 H5 页 面 上 会 显示 一 个 地 图 图 标 ， 图 标 样式 可 以 在 按钮 图 标 


中 进行 选择 ， 如 图 3-32 所 示 。 人 人 秀 的 地 图 内 置 4 种 第 用 按钮 图 标 ， 如 果 用 户 不 满意 ， 也 可 以 添加 目 制 
图 标 。 


图 3-31 在 页 面 中 添加 地 图 图 3-32 设置 地 图 图 标 
设置 完成 后 ， 即 可 在 H5 页 面 中 添加 腾讯 地 图 ， 指 明 活 动 场 所 ， 如 图 3-33 所 示 。 通 过 在 HS 作品 中 
内 骨 地 图 ， 用 户 使 用 时 无 须 打 开外 部 的 地 图 链接 ， 即 可 让 显示 效果 更 加 自然 ， 而 且 查 看 起 来 也 非常 方 
便 ， 让 用 户 享 受 更 舒适 的 体验 。 
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wp 在 人 人 秀 H5 制 作 页 面 中 添加 地 图 的 同时 ， 可 以 为 地 图 添加 动画 效果 ， 在 设置 
[过 家 指点 ) 触发 事件 之 后 ， 地 图 的 展开 动画 ， 可 以 使 页 面 与 用 户 的 交互 性 大 大 提高。 


3.2.3 添加 倒计时 元 系 


在 H5 作 品 中 添加 倒计时 插件 ， 可 以 通过 计时 器 来 记录 一 段 时 间 的 长 度 ， 适 合 制作 
节日 倒计时 、 电 商 活 动 倒计时 、 会 议 倒 计时 、 考 试 倒计时 以 及 纪念 日 倒计时 等 场景 ， er: 
作为 H5 页 面 的 点 级 。 扫 码 看 视频 

下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 倒计时 元 素 的 操作 方法 。 其 操作 步 又 如 下 。 
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e STEP 01 打开 人 人 秀 编辑 器 ， 更 换 好 背景 。@ 单 击 “ 互 动 ”按钮 展开 其 操作 面板 ，@ 在 “搜索 插件 ” 
栏 中 输入 “倒计时 ”;@ 选 择 查找 到 的 “倒计时 ”插件 ， 如 图 3-34 所 示 。 
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e STEP 02 执行 操作 后 ， 即 可 导入 倒计时 插件 ， 在 到 达 时 间 中 设置 倒计时 截止 日 期 ， 如 图 3-35 所 示 。 
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图 3-35 设置 倒计时 截止 日 期 
9 STEP 03 在 屏幕 右边 的 “显示 字体 ”选项 中 设置 字体 样式 ， 共 有 普通 、 卡 通 、 动 画 、 数 码 、 苹 果 字 体 
共 5 种 可 供 选 择 ， 可 根据 需求 进行 选择 设置 ， 如 图 3-36 所 示 。 
9 STEP 04 在 “显示 内 容 ” 选 项 中 可 以 设置 倒计时 插件 的 计时 单位 ， 有 日 、 时 、 分 、 秒 等 计时 单位 可 供 
选择 ， 可 根据 需求 进行 选择 设置 ， 如 图 3-37 所 示 。 
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图 3-36 设置 字体 样式 图 3-37 设置 计时 单位 
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9 STEP 05 在 “时 间 标 记 ” 下 拉 列 表 框 中 可 以 设置 中 文 、 英 文 、 时 钟 ， 可 根据 需求 进行 选择 设置 ， 如 
图 3-38 所 示 。 

9 STEP 06 在 “标记 位 置 ” 下 拉 列 表 框 中 可 以 设置 时 间 标 记 的 显示 方位 为 上 方 、 下 方 、 左 侧 、 右 侧 ， 可 
根据 需求 进行 选择 设置 ， 如 图 3-39 所 示 。 
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图 3-38 ”设置 时 间 标 记 图 3-39 设置 标记 位 置 
9 STEP 07 在 “显示 比例 ”和 “字体 颜色 ”选项 中 可 以 设置 字体 大 小 及 颜色 ， 如 果 和 希望 提醒 用 户 时 间 已 
到 ， 可 以 在 设置 到 达 通 知 中 选择 需要 的 选项 ， 如 了 网址、 页面、 事件、 局 动 分 享 页 ， 如 图 3-40 所 示 。 
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图 3-40 设置 显示 比例 、 字 体 颜 色 及 到 达 通 知 


二 家 指点 ] 倒计时 是 指 从 未 来 某 个 时 间 点 开始 ， 到 现在 的 时 间 点 来 计算 时 间 ， 可 以 展现 出 : 
BA ~、 ee 、 、 
一 一 一 一 到 达 未 来 那个 时 间 点 还 有 多 久 ， 可 以 增加 事件 的 紧迫 感 。 


3.2.4 ”添加 动画 文子 元 么 


在 H5 作 品 中 可 以 设置 触发 事件 使 文字 以 动画 形式 展现 ， 动 画 文字 会 使 得 整个 页 面 
更 具 趣 味 性 。 let 
下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 动画 文字 元 素 的 操作 方法 。 其 操作 步骤 扫 码 看 视频 
如 下 。 
9 STEP 01 打开 人 人 秀 编 辑 器 ， 更 换 好 背景 。@ 单 击 “ 文 字 ” 按 钮 展开 其 操作 面板 ， 并 在 编辑 页 面 自动 
生成 一 个 文本 框 ;， 四 可 在 文本 框 中 添加 所 需 文 本 ， 如 图 3-41 所 示 。 
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图 3-41 添加 设置 文字 
9 STEP 02 添加 文字 之 后 ， 全 单 击 右 侧 的 “动画 ”按钮 ， 展 开 操作 面板 ， 单 击 “ 添 加 动画 ”按钮 ， 即 可 
为 文字 添加 动画 ;可 以 根据 自身 需求 ， 对 方式 、 延 迟 、 持 续 、 次 数 、 类 型 、 动 画 效果 及 动画 方向 进 
行 选择 ， 如 图 3-42 所 示 。 
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图 3-42 ”添加 动画 设置 


本 


je i>) 可 以 添加 多 种 动画 效果 ， 只 需 掌 担 好 动画 的 问 隔 时 间 与 连续 性 ， 且 在 人 人 秀 : 
指点 H5 制 作 平台 中 ， 普 通用 户 暂时 只 能 添加 基本 动画 ， 高 级 动画 需 升 级 至 企业 标准 版 
:或 以 上 版 本 ， 方 能 使 用 。 
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3.2.5 ”添加 图 表 插件 元 素 mee 


在 H5 作 品 中 添加 图 表 插件 元 素 ， 可 以 使 一 些 文字 数据 信息 集中 至 图 表 中 展示 ， 方 A 
便 直接 ， 多 用 于 企业 总 结汇 报 或 者 商务 数据 汇报 中 。 Ee: 
下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 图 表 插件 元 素 的 操作 方法 。 其 操作 步骤 ” 扫 码 看 视频 


如 下 。 

9 STEP 01 打开 人 人 秀 编辑 器 ， 更 换 好 背景 。@ 单 击 “ 互 动 ” 按 钮 展开 其 操作 面板 ， 人 @ 在 “搜索 插件 " 
栏 中 输入 “图 表 ”， 合 选择 查找 到 的 “图 表 ” 插 件 ， 如 图 3-43 所 示 。 

9 STEP 02 执行 操作 后 ， 即 可 导入 图 表 插 件 ， 在 右 侧 设置 图 表 类 型 ， 有 柱状 图 、 条 形 图 、 曲 线 图 、 饼 图 
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及 面积 图 几 种 选项 ， 如 图 3-44 所 示 。 
9 STEP 03 在 屏幕 右边 的 “显示 方式 ”下 拉 列 表 框 中 可 以 设置 图 表 的 显示 方式 ， 如 基础 、 标 签 、 堆 又 ， 
同时 可 根据 自身 需求 ， 设 置 字体 颜色 及 图 表 颜 色 ， 如 图 3-45$ 所 示 。 


图 3-43 ”和 选择“ 图表” 插件 


图 3-44 ”设置 图 表 类 型 图 3-45 ”设置 图 表 的 显示 方式 
9 STEP 04 @ 单 击 屏 幕 右边 的 “编辑 数据 ”按钮 ， 全 在 弹出 的 “数据 设置 ”窗口 中 可 以 设置 图 表 的 文字 
信息 ; 全 设置 完成 后 单 击 “ 保 存 ” 按 钮 ， 如 图 3-46 所 示 。 调 整 图 表 至 适当 的 位 置 ， 即 可 完成 图 表 插 件 
的 添加 。 


图 3-46 设置 图 表 数 据 
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3.2.6 ”添加 祝福 锅 卡 元 票 


在 H5 作 品 中 添加 祝福 贺卡 元 素 ， 多 用 于 节日 活动 或 较为 喜庆 的 活动 ， 例 如 新 年 加 名 时 时 
卡 、 圣 诞 贺 卡 、 母 亲 节 贺 卡 、 生 日 贺卡 等 ， 贺 卡 上 一 般 有 祝福 的 话语 ， 往 往 用 短 句 表 而 串 二 我 江 
达 ， 用 来 互相 表示 问候 。 下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 祝福 贺卡 元 素 的 操 扫 
作 方法 。 其 操作 步骤 如 下 。 
e STEP 01 打开 人 人 秀 编辑 器 ， 更 换 好 背景 。@ 单 击 “互动 ”按钮 展开 其 操作 面板 @ 在 “搜索 插件 ， 
栏 中 输入 “贺卡 ”;，@ 选 择 查 找到 的 “贺卡 ”插件 ， 如 图 3-47 所 示 。 


看 视频 


图 3-47 选择 “贺卡 ”插件 
9 STEP 02 执行 操作 后 ， 即 可 导入 帝 卡 插件 ， 在 屏幕 右 侧 “ 帝 卡 内 容 ” 人 处， 可 输入 所 需 的 文本 内 容 ， 如 
图 3-48 所 示 。 
9 STEP 03 在 屏幕 右 侧 的 “字体 ”选项 组 中 ， 设 置 “ 选 择 字 型 ”为 “宋体 ”、“ 行 间距 ”为 50px、 
“ 字 间 距 ” 为 2px、“ 文 字样 式 ” 为 “文字 加 粗 ”、“ 文 字 颜 色 ” 为 “白色 ”、“ 文 字 大 小 ”为 
26pX， 如 图 3-49 所 示 。 


图 3-48 输入 贺卡 文本 图 3-49 ”设置 文字 


e STEP 04 在 屏幕 右 侧 的 “按钮 样式 ”选项 组 中 ， 可 以 选择 喜欢 的 样式 ， 但 在 页 面 编辑 窗口 中 看 不 到 效 


果 ， 需 单 击 右上 角 的 “预览 ”按钮 才能 显示 所 选 的 “按钮 样式 ”， 或 者 直接 发 布 生成 页 面 也 会 显示 。 
在 这 里 作者 选择 第 一 款 样 式 进 行 效 果 展 示 ， 单 击 右 上 角 的 “预览 ”按钮 ， 跳 转 进入 预览 界面 ， 效 
果 如 图 3-50 所 示 。 
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预览 模式 ， 仅 供 测试 


'… 。 发 送 贺卡 ”， 


察 丑 的 衣 友 
过 年 了 ， 真 热风 ，2018 年 视 你 新 年 快 
乐 ! 


图 3-50 ”预览 按钮 样式 


3.2.7 ”添加 雷达 扫 摘 元 素 


人 人 秀 还 为 用 户 提 供 了 很 多 有 趣 的 交互 方式 ， 如 雷达 扫描 、 问 卷 调查 、 答 题 等 。 
其 中 ， 雷 达 扫 描 主 要 是 模拟 雷达 的 扫描 效果 ， 可 以 让 观众 的 注意 力 更 加 集中 ， 快 速 体 : 
现 设计 页 面 要 表现 的 要 点 。 扫 码 看 视 频 

下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 雷达 扫描 元 素 的 操作 方法 。 其 操作 步骤 如 下 。 

9 STEP 01 打开 人 人 秀 编辑 器 ， 更 换 好 背景 。@ 单 击 “ 互 动 ” 按 钮 展开 其 操作 面板 ， 全 选择 “趣味 ”类 
目 中 的 “雷达 扫描 ”插件 ， 如 图 3-51 所 示 。 


图 3-51 选择 “雷达 扫描 ”插件 
9 STEP 02 执行 操作 后 ， 即 可 插入 雷达 扫描 插件 ， 在 屏幕 右 侧 的 “雷达 扫描 ”选项 区 中 单 击 “更 换 图 
标 ” 按 钮 ， om 中 上 传 图 片 或 选取 背景 库 中 的 图 片 替 换 图 标 ， 如 图 3-52 所 示 。 
© STEP 03 在 a ee “文字 ” A 效果 如 图 3-53 所 示 。 


雷达 扫描 插件 自 带动 画 效 果 ， 所 以 在 保存 并 发 布 HS 作品 后 ， 即 可 预览 雷 
ER 用 户 只 有 在 等 雷达 扫 出 了 图 标 及 文字 之 后 ， 才 可 以 通过 单 击 或 其 余 
:设置 好 的 交互 操作 进入 下 一 页 。 在 实际 制作 过 程 中 ， 我 们 需要 注意 雷达 扫描 后 续 页 面 的 衔接 性 ， 
:可 以 增加 一 些 福利 ， 如 抽奖 、 优 惠 券 、 刊 刮 卡 等 ， 来 吸引 用 户 单 击 参 与 ， 降 低 用 户 在 等 待 雷达 扫 
措 时 的 村 召 短 。 
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图 3-52 更换 图 标 


图 3-53 ”输入 文本 


3.2.8 添加 语音 留言 元 系 


人 人 夯 H5 平 台 提 供 了 很 多 H5 页 面 的 交互 方式 ， 其 中 的 语 首 留言 交互 形式 得 到 了 
很 多 用 户 的 人 退 捧 ， 不 同 于 弹 幕 形式 的 留言 ， 语 音 留言 更 具 针 对 性 ， 不 会 像 弹 幕 形式 一 
样 补 济 没 ， 同 时 点 放 的 方式 ， 也 大 大 增强 了 页 面 与 用 户 的 交互 性 。 
下 面 以 人 人 秀 为 例 ， 介 绍 在 HS 页面 中 添 加 语音 留言 元 系 的 操作 方法 。 其 操作 步骤 如 下 。 
9 STEP 01 打开 人 人 秀 编 辑 嚣 ， 更 换 好 背景 。@@ 单 击 “ 互 动 ” 按 钮 展开 其 操作 面板 ， 全 选择 “活动 ”类 
目 中 的 “语音 留言 ”插件 ， 如 图 3-54 所 示 。 


图 3-54 ”选择 “语音 留言 ”插件 
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9 STEP 02 执行 操作 后 ， 即 可 插入 语音 留言 插件 ， 在 屏幕 右 侧 中 的 “语音 留言 ”选项 区 中 可 以 选择 相对 
应 的 图 标 进 行 奉 换 ， 或 单 击 “ 上 传 图 片 ”按钮 ， 在 弹出 的 窗口 中 选择 需要 更 改 的 状态 ， 进 行 图 片上 传 
替换 操作 ， 也 可 选取 图 库 中 的 图 片 进行 替换 ， 如 图 3-55 所 示 。 


图 3-55 更换 语音 状态 图 标 
9 STEP 03 在 “语音 留言 ”选项 区 中 ， 还 可 以 选择 设置 “按钮 样式 ”， 但 在 页 面 编辑 窗口 中 展示 不 出 效 
果 ， 只 能 通过 预览 或 保存 发 布 作品 ， 才 能 显示 “按钮 样式 ”效果 。 这 里 作者 选取 第 一 个 按钮 样式 进行 
效果 展示 ， 并 单 击 右 上 角 的 “ 预 搞 ”按钮 ， 跳 转 到 预览 界面 ， 效 果 如 图 3-56 所 示 。 


预览 模 式 仅 供 测试 


图 3-56 设置 按钮 样式 


”在 “语音 留言 ”选项 区 中 ， 可 以 设置 “自动 播放 ” ， 但 大 多 数 的 H5 作 品 不 会 
ER DD 自动 播放 功能 会 降低 页 面 与 用 户 的 交互 性 ， @ 并 不 是 每 个 用 
， 户 都 会 选择 听 语 音 留言 ， 且 在 用 户 使 用 的 场景 中 或 许 并 不 适合 播放 页 面 声音 ， 如 果 设 置 自动 播放 
”的 功能 ,会 导致 用 户 反 感 。 : 


3.2.9 ”添加 照片 海报 元 素 


优秀 的 H5 作 品 是 由 文字 + 图 片 形 成 的 ， 所 以 只 有 “一 句 话 ”是 不 够 的 ， 还 必须 有 
一 张 能 配合 “一 句 话 ”并 能 展现 出 产品 特性 ， 抑 或 广告 信息 ， 抑 或 活动 主题 的 “一 幅 DE 
图 ”， 才 能 起 到 传播 广告 的 目的 。 扫 码 看 视频 

使 用 人 人 秀 的 照片 海报 功能 ， 可 以 快速 在 H5 页 面 中 添加 富有 画面 感 的 海报 图 、 广 告 图 ， 企 业 可 以 
在 其 中 利用 推广 信息 勾 起 消费 者 的 兴趣 ， 不 过 促销 信息 不 能 太 多 ， 有 一 个 主题 即 可 。 


下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 照 亡 海报 元 素 的 操作 方法 。 其 操作 步骤 如 下 。 
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9 STEP 01 打开 人 人 秀 编辑 器 ， 更 换 好 背景 。@ 单 击 “ 互 动 ” 按 钮 展开 其 操作 面板 ， 全 选择 “活动 ”类 
目 中 的 “海报 ”插件 ， 如 图 3-$7 所 示 。 


图 3-57 选择 “海报 ”插件 


e STEP 02 单 击 “ 上 传 ”按钮 可 以 上 传 自 定义 的 海报 图 片 ， 然 后 调整 海报 图 片 ， 生 成 专属 海报 ， 并 发 布 
作品 即 可 ， 如 图 3-58 所 示 。 


图 3-58 ”设置 “海报 ”插件 


入 家 指点 在 HS 作品 中 加 入 海报 可 以 用 于 裂变 传播 ， 成 功 的 海报 需要 卖点 ， 有 了 卖点 就 
| 一生/ 能 吸引 消费 者 的 眼球 ， 只 有 吸引 了 消费 者 的 眼球 ， 才 能 将 产品 详情 展现 在 消费 者 的 
面前 ， 从 而 更 好 地 宣传 产品 。 : 
: 海报 一 般 是 体现 促销 信息 的 图 ， 并 且 海 报 的 风格 很 重要 ， 这 是 决定 消费 者 能 否 被 海报 所 吸引 的 重 
”要 因素 ， 并 且 一 般 海 报 需要 注意 构图 方式 、 是 否 突出 广告 主题 、 是 否 具有 一 个 独特 的 风格 等 问题 。 


3.2.10 制作 长 页 面 H> 


长 页 面 又 称 为 “一 页 ”“ 单 页 ”， 也 就 是 说 一 个 H5 作 品 只 有 一 个 页 面 ， 可 以 让 画院 寓 苹 弄 年 
面 更 具 张 力 ， 吸 引 眼 球 ， 是 一 种 比较 流行 的 HS 排版 方式 ， 从 而 受到 很 多 运营 商 、 广 告 ” 间 弛 恰 症 
行业 人 员 的 欢迎 。 扫 码 看 视频 

在 手机 上 展示 信息 时 ， 长 页 面 就 是 一 种 非常 好 的 排版 方式 ， 不 但 可 以 放置 大 量 信息 ， 而 且 还 可 以 
让 信息 的 排序 更 有 条 理 。 

下 面 以 人 人 秀 为 例 ， 介 绍 制作 长 页 面 H5 的 操作 方法 。 其 操作 步 又 如 下 。 


第 3 章 “H5 设 计 的 基本 操作 


e STEP 01 打开 人 人 秀 编辑 器 ， 引 单 击 “背景 ”按钮 展开 其 操作 面板 ; 外 单 击 “ 更 换 ” 按 钮 ， 如 图 3-59 
所 示 。 


图 3-59 单 击 “更 换 ” 按 钮 
9 STEP 02 在 弹出 的 窗口 中 更 换 背 景 ， 用 户 可 以 上 传 自己 设计 的 长 页 面 ， 也 可 以 在 人 人 秀 的 背景 库 中 寻 
找 合适 的 图 片 使 用 ， 如 图 3-60 所 示 。 


图 3-60 选择 背景 


9 STEP 03 选择 相应 背景 后 ， 选 中 “长 页 面 ” 复 选 框 ， 如 图 3-61 所 示 。 
9 STEP 04 适当 调节 背景 选区 ， 让 背景 中 的 图 案 显 示 在 合适 人 位置， 预览 栏 中 的 明亮 部 分 为 长 页 面 在 手机 
中 显示 的 第 一 页 ， 如 图 3-62 所 示 。 


选中 “长 页 面 ” 
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9 STEP 05 然后 设置 “背景 模式 ”为 “固定 ”， 这 样 会 自动 填充 手机 屏幕 。 如 果 将 “背景 模式 ”设置 为 
“滚动 ”， 则 在 背景 大 小 和 长 页 面 大 小 不 一 致 的 情况 下 页 面 会 出 现 空白 ， 如 图 3-63 所 示 。 

9 STEP 06 通常 情况 下 ， 单 页 的 长 页 面 都 会 选中 “停止 翻 页 ” 复 选 框 ， 因 为 下 划 长 页 面 和 向 后 翻 页 手势 
一 致 ， 如 果 不 选 中 该 选项 ， 则 在 滑动 长 页 面 时 有 可 能 会 翻 至 后 一 页 ， 如 图 3-64 所 示 。 
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图 3-63 ”设置 “背景 ”模式 图 3-64 ”选中 “停止 翻 页 ” 复 选 框 


执行 上 述 操作 后 ， 即 可 制作 一 个 长 页 面 背 景 ， 用 户 只 需要 在 长 页 面 上 添加 诸如 图 片 、 音 乐 、 互 动 
等 其 他 元 素 ， 束 能 够 成 功 地 制作 出 一 个 完整 的 长 页 面 了 。 
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je 在 人 人 秀 H5 制 作 平台 中 ， 制 作 长 页 面 中 的 “停止 翻 页 ”选项 ， 至 少 需要 升级 
专家 指点 bee \ 
到 企业 标准 版 或 以 上 版 本 才能 使 用 。 : 


为 设计 加 分 的 4 个 要 点 


在 设计 H5 页 面 时 ， 除 了 通常 的 选取 适用 的 图 像 与 文字 结合 ， 以 及 添加 一 些 相 关 元 素 的 方式 为 页 面 
提升 整体 效果 外 ， 还 有 不 少 能 够 为 页 面 加 分 的 要 点 ， 接 下 来 我 们 详细 介绍 4 个 为 设计 加 分 的 要 点 。 


3.3.1 细 坟 与 统一 


在 众多 H5 页 面 中 ， 细 节 的 修饰 一 定 是 脱 蜂 而 出 的 关键 ,但 过 多 且 杂 乱 的 修饰 则 会 形成 强烈 的 负面 
效果 ， 如 何 通 过 细节 与 统一 的 方式 为 H5 页 面 提升 档次 ? 接 下 来 我 们 看 看 如 图 3-65 所 示 的 大 众 扩 评 为 电 
影 《 一 步 之 运 》 所 做 的 H5 推 广 。 

整个 页 面 对 细 节 的 把 握 可 以 说 非 和 党 好， 从 首页 的 动画 效果 到 页 面 的 加 载 都 表现 得 十 分 到 位 ， 同 
时 整体 的 素材 和 主题 非常 巾 合 ， 该 页 面 的 设计 师 按 “细节 与 统一 ”的 观点 进行 设计 ， 马 妙 地 将 作品 
的 画面 细节 设计 及 动画 与 电影 的 主题 相 融 合 ， 让 用 户 产生 共鸣 联想 到 电影 的 主题 。 如 图 3-66 所 示 ， 
“ 先 走 一 步 ” 巧 妙 地 运用 了 一 语 双 关 的 写法 ， 在 提示 用 户 扫 描 二 维 码 即 可 进入 下 一 个 页 面 的 同时 也 
暗示 电影 的 名 称 《 一 步 之 遥 》， 同 时 二 维 码 和 品牌 名 的 整个 版 面 布局 非常 融洽 。 
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图 3-65 《一 步 之 过 》 电 影 HS 推 广 页 面 


执 占 


33 与 话题 


H5 的 页 面 设计 推广 ， 表 现 最 成 功 的 一 点 应 该 就 是 能 够 让 用 户 在 观看 页 面 的 最 后 ， 自 发 地 将 H5 转 
发 出 去 ， 而 巧妙 地 将 品牌 与 相关 的 实时 热点 话题 相 结 合 ， 可 以 使 整个 页 面 更 具 吸 引力 。 

例如 ， 腾 讯 互 娱 为 推广 腾讯 动漫 APP 所 做 的 HS 页 面 ， 邀 请 了 热度 高 的 艺人 为 品牌 代言 ， 且 找 准 了 
动漫 二 次 元 的 性 质 ， 将 代言 人 与 画面 风格 、 内 容 文 化 展示 及 弹 幕 元 素 等 巧妙 地 结合 起 来 ， 能 够 让 用 户 
在 看 完 之 后 不 会 态 记 推广 ， 并 且 能 够 利用 代言 人 粉丝 群体 的 转发 宣传 ， 起 到 很 好 的 推广 效果 ， 如 
图 3-67 所 示 。 


《< 返回 《薛之谦 史 上 最 疯狂 的 广告 


3.3.3 故事 与 情感 


首 重 是 一 家 健康 发 展 有 限 公 司 ，2016 年 为 了 推动 品牌 旗舰 产品 的 销量 ， 结 合 盛 行 的 HTML 5 推出 
了 一 球 H5 互 动 网 页 。 页 面 整体 以 一 位 男生 的 口吻 讲述 自己 在 成 长 历程 中 对 妻子 的 爱 与 愧 次 ， 到 最 后 引 
出 “ 首 草 一 一 滋 阴 对 品 ， 爱 妻 首选 ”的 宣传 语 。 通 过 讲 故 事 ， 引 发 用 户 情 感 共 鸣 的 同时 ， 也 达到 了 宣 


传 品牌 的 目的 ， 如 图 3-68 所 示 。 
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首 草 先生 的 情书 Er 返回 首 草 先生 的 情书 …- 返 首 草 先生 的 情书 


图 3-68  《 首 草 先生 的 情书 》H5 页 面 


3.3.4 ”技术 与 互动 


交互 设计 可 以 说 是 H5 页 面 的 一 大 亮点 ， 不 同 于 APP 般 的 烦琐 。 合理 运 用 技术 与 页 面 结合 ， 打 造 出 
流畅 的 互动 体验 ， 可 以 为 设计 页 面 加 分 不 少 。 


如 图 3-69 所 示 ， 这 是 件 巢 咖啡 为 品牌 推广 所 做 的 H5 案 例 一 一 一 杯 咖 啡 ,过 见 有 意思 的 人 。 
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图 3-69 “一杯 咖啡 ， 遇 见 有 意思 的 人 ”HS 案例 
整个 案例 主要 以 第 一 人 称 的 视角 让 用 户 仿 知 置 身 于 场景 中 ， 桨 痢 一 杯 咖啡 ， 在 咖啡 馆 里 寻 人 聊 
天 ， 同 时 利用 VR 的 技术 ， 让 画面 更 具 沉 浸 感 ， 技 术 的 巧妙 利用 ， 可 以 让 用 户 更 愿意 沉醉 其 中 ， 从 而 达 
到 很 好 的 推广 效果 。 


视觉 交互 设计 是 指 视觉 设计 与 交互 设计 综合 运用 的 一 种 设计 方式 ,视觉 
设计 是 指 设计 师 要 从 自身 到 用 户 对 整个 页 面 的 视觉 感受 进行 设计 ， 而 交互 设 
计 是 为 页 面 添加 人 机 互动 的 一 种 机 制 。 本 章 主要 介绍 HH5 视 觉 交 互 页面 的 设计 
方法 。 


H5 页 面 的 版 式 设计 
H5 页 面 的 字体 设计 
H5 页 面 的 色彩 设计 
HS 页 面 的 交互 设计 
H5 页 面 的 视觉 流程 设计 
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H5 页 面 的 版 式 设 计 


如 何 制作 出 美观 、 酷 炫 的 HS 作品 ? 除了 简单 的 图 文 搭配 ， 以 及 一 些 元 素 的 添加 修饰 外 ， 整 个 页 面 
的 版 式 设 计 也 是 非常 重要 的 。 下 面 我 们 详细 了 解 一 下 如 何 对 HS 页 面 的 版 式 进行 专业 的 设计 ， 制 作出 吸 
引 人 有 眼球 的 HS 版 面 。 


4.1.1 HS5 版 式 设计 的 原则 


在 大 多 数 的 H5 设 计 工 具 中 ， 不 论 是 移动 端的 小 程序 、APP 上 的 H5 设 计 工 具 ， 还 是 PC 端的 网 站 H5 
设计 工具 ， 所 制作 的 H5 页 面 都 是 适合 在 移动 手机 端 屏幕 展示 的 。 

版 式 设计 要 考虑 的 因素 是 非常 多 的 ， 例 如 手机 屏幕 适用 H5 页 面 的 尺寸 ， 以 及 如 何在 有 限 的 屏幕 中 
对 所 需 传 达 的 内 容 进行 排版 设计 等 。 下 面 详细 介绍 HH5 版 式 设计 的 原则 。 

1. 内 容 分 类 整理 

对 HS5 页 面 进行 设计 排版 时 ， 对 需要 疝 用 户 传达 的 信息 进行 分 类 整理 ， 把 相关 的 信息 归 类 在 一 起 ， 
排版 时 将 相关 的 元 素 进行 整体 排列 ， 可 以 对 用 户 在 观赏 H5 页 面 时 的 逻辑 思维 提供 信息 组 织 帮助 ， 提 高 
用 户 信息 的 获取 量 。 图 4-1 所 示 为 对 页 面 信息 进行 的 分 类 整理 。 


图 4-1 ”信息 分 类 整理 


2. 元 素 对 齐 排列 

将 页 面 元 系 进 行 对 齐 排列 ， 为 的 是 能 够 让 整个 页 面 中 的 元 素 形成 整体 视觉 效果 。 对 齐 排列 作为 第 
用 的 排版 方式 ， 能 够 使 页 面 整体 元 素 具 有 条 理性 ， 形 成 一 个 统一 的 整体 ， 建 立 一 种 清晰 的 视觉 效果 。 
图 4-2 所 示 为 对 页 面 元 素 进行 对 齐 排列 的 效果 。 
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图 4-2 元素 对 齐 排 列 
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3. 布局 重复 交错 
重复 是 指 在 H5 页 面 布 局 中 ， 对 相关 的 元 素 、 图 像 或 文字 使 用 相同 的 属性 设计 ， 使 其 形成 一 种 视觉 
上 的 重复 ， 而 交错 的 应 用 就 是 为 了 避免 生硬 的 重复 ， 导 致 整个 页 面 过 于 死板 ， 如 图 4-3 所 示 。 


图 4-3 ”对 页 面 进行 重复 交错 
4. 关键 点 的 对 比 布局 
在 H5 页 面 制作 时 ， 图 文 元 素 一 定 会 存在 主 次 之 分 。 作 为 主要 信息 存在 的 元 素 ， 在 页面 中 为 了 吸引 
用 户 眼 球 ， 束 要 对 元 素 进 行 看 重 设 计 ， 使 得 主要 元 率 与 其 他 元 素 呈 现 完全 不 同 的 效果 ， 形 成 对 比 性 ， 
有 助 于 用 户 的 阅读 逻辑 性 。 
如 图 4-4 所 示 ， 这 是 在 页 面 中 突出 重点 信息 的 版 式 效 果 。 
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图 4-4 突出 重点 信息 


4.1.2 Ho 页 面 的 网 格 访 计 
网 格 设计 ， 又 称 为 “网 格 系统 ”， 起 源 于 20 世 纪 初 的 西欧 国家 ， 完 善 成 熟 于 20 世 纪 中 期 的 瑞士 。 
最 早 对 这 个 概念 进行 图 释 的 是 瑞士 的 约瑟夫 。 米 勒 - 布 罗 克 曼 ， 其 于 1961 年 出 版 的 《平面 艺术 家 及 其 设 
计 议 题 》 一 书 ， 使 网 格 设计 成 为 了 平面 设计 史上 的 先驱 。 
优秀 的 版 式 设计 决定 了 整个 作品 的 基调 以 及 美观 程度 ， 在 形成 民 好 的 视觉 信息 传递 时 ， 也 能 够 很 
好 地 进行 传播 。 但 不 是 所 有 的 行业 企业 都 会 为 自己 的 品牌 聘请 一 个 设计 师 ， 接 下 来 便 带 大 家 学 习 如 何 
在 雯 基础 的 情况 下 擎 握 网 格 设计 。 
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网 格 的 运用 在 设计 领域 可 以 说 是 非常 普遍 的 ， 在 所 有 的 常用 绘图 软件 中 都 必然 存在 着 网 格 工具 ， 
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图 4-5 ”Photoshop CC 2018 绘 图 页 面 中 的 网 格 工具 

1. 设计 原理 

网 格 设计 的 风格 形成 ， 最 早 是 对 建筑 的 应 用 ， 其 风格 特点 是 通过 严格 的 数字 比例 关系 进行 运算 ， 
再 把 版 心 划 分 为 无 数 统一 尺寸 的 网 格 。 将 版 面 分 为 铬 干 个 均匀 的 格子 ， 形 成 网 状 式 的 网 格 ， 将 图 片 与 
文字 置 入 其 中 ， 使 版 面具 有 一 定 的 节奏 变化 ， 从 而 形成 一 种 优美 的 韵律 ， 但 也 会 使 版 面 产生 采 板 的 负 
面 影响 。 

网 格 为 所 有 的 设计 元 素 提 供 了 一 个 结构 ， 可 以 使 设计 创造 更 轻松 、 灵 活 。 采 用 这 种 方法 设计 的 页 
面 有 着 非常 好 的 比例 感 和 秩序 感 ， 同 时 也 能 形成 很 好 的 准确 性 与 严密 性 ， 帮 助 设计 师 设 计 出 美观 、 大 
方 ， 而 又 实用 的 版 面 。 

图 4-6 所 示 为 现代 杂志 中 运用 的 网 格 设计 。 

图 4-7 所 示 为 网 页 中 运用 的 网 格 设 计 。 
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图 4-6 ”现代 杂志 中 运用 的 网 格 设计 图 4-7 网 页 中 运用 的 网 格 设计 
网 格 设计 尽管 能 够 追溯 到 很 远 的 历史 年 代 ， 会 让 用 户 觉得 难以 琢磨 ， 但 网 格 设计 实际 上 就 是 将 页 
面 平均 分 割 ， 以 网 格 的 形式 来 规范 页 面 中 的 图 形 信息 。 
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其 实 ， 网 格 设计 之 所 以 应 用 广泛 ， 也 正 是 因为 其 包含 了 版 式 设 计 的 四 大 基本 原理 : 信息 的 分 类 整 
理 、 元 素 的 对 齐 排 列 、 布 局 的 重复 统一 、 关 键 点 的 强调 对 比 。 
2. 设计 原则 
对 网 格 设计 系统 进行 细致 划分 ， 可 以 分 为 三 种 类 别 : 水 平 构成 、 水 平 /垂直 构成 以 及 倾斜 构成 。 所 
以 ， 在 此 之 前 ， 我 们 需要 了 解 以 下 网 格 设 计 的 原则 : 
@ 将 重要 的 元 素 排列 到 用 户 视觉 中 心 点 ， 利 于 用 户 获 取 重 要 信息 。 
相关 元 素 进行 紧密 排列 ， 有 助 于 用 户 弄 清 阅读 逻辑 。 
元 素 的 排版 需要 在 页 面 控制 的 范围 内 。 
元 素 之 间 不 可 进行 章 复 、 侄 加、 和 窗 盖 。 
当 所 需 排 列 元 素 过 多 时 ， 重 要 元 素 占 据 的 网 格 比例 一 定 要 大 ， 突 出 视觉 重点 。 
下 面 列举 几 种 分 割 形 式 的 网 格 设计 案例 ， 在 设计 网 格 页 面 时 可 以 参考 学 习 。 
图 4-8 所 示 为 运用 一 刀 切 分 法 将 页 面 横 问 切割 成 两 块 ， 然 后 进行 元 素 填充 。 
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一 刀 切 分 法 的 网 格 设计 ， 能 够 使 整个 页 面 布 局 非常 清晰 ， 一 般 应 用 于 图 片 摄影 展示 以 及 商品 陈列 
展示 。 

如 图 4-9 所 示 ， 这 是 运用 横 纵 各 一 刀 切 分 法 将 页 面 切割 成 四 个 等 分 的 格子 ， 然 后 进行 元 素 填充 。 如 
图 4-10 所 示 ， 同 样 也 是 运用 横 纵 各 一 刀 切 分 法 将 页 面 切割 成 四 个 格子 ， 但 重要 元 素 占 据 了 两 个 格子 ， 
突出 视觉 重点 。 
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图 4-9” 横 纵 各 一 刀 切 分 法 (1) 图 4-10 横 纵 各 一 刀 切 分 法 (2 ) 
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以 上 列举 的 案例 都 是 一 些 简单 基础 的 切 分 法 的 运用 ， 在 实际 H5 页 面 网 格 设计 过 程 中 还 有 大 量 的 切 
分 法 : 横 同 两 中 切 分 法 、 横 纵 各 两 刀 切 分 法 以 及 对 角 线 切 分 法 等 。 


4.1.3”H5 页 面 版 式 的 突破 


在 H5 页 面 中 总 会 有 一 些 必要 的 元 素 需 要 进行 排版 ， 但 这 些 元 素 搭配 会 使 画面 显得 过 于 生硬， 需 利 
用 一 些 元 素 融 入 排版 以 突破 整个 版 式 的 气氛 。 

如 图 4-11 所 示 的 H5 杂 志 封 面 ， 将 人 物 头 像 融入 页 面 ， 不 但 没有 使 整个 页 面 显 得 奇怪 ， 反 而 打破 了 
一 些 元 素 排 版 所 营造 的 生 便 气氛 。 


图 4-11 HS 杂志 封面 


H5 页 面 的 字体 设计 


在 进行 页 面 设计 时 ， 文 字 是 必 不 可 少 的 一 个 关键 元 素 ， 通 过 一 些 简 单 的 文字 讲解 ， 可 以 同 用 户 解 
答 所 传达 的 图 片 信 息 ， 但 生硬 的 文字 穿插 会 导致 用 户 对 整个 页 面 失去 阅读 兴趣 ， 所 以 H5 页 面 的 字体 设 
计 也 是 必 不 可 少 的 掌握 要 扣 。 

下 面 详细 介绍 H5 页 面 的 字体 设计 方法 。 


4.2.1 设置 H2 页 面 的 子 体 


随 痢 设计 行业 的 发 展 ， 文 字 已 经 渐渐 成 为 各 大 制作 软件 中 的 字体 库 或 字体 包 。 除 了 特别 定制 的 页 
面 需要 对 字体 进行 有 针对 性 的 设计 外 ， 只 需 在 字体 库 中 选取 合适 的 字体 选项 即 可 ， 但 如 何在 众多 字体 
选项 中 快速 地 找到 适合 页 面 的 字体 ， 就 需要 对 每 种 类 别 的 字体 特点 有 所 了 解 。 下 面 我 们 详细 介绍 几 种 
种 用 的 中 英文 字体 。 

1. 中 文字 体 

利用 的 中 文字 体 大 致 分 为 以 下 几 类 。 


加 
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@ 有 衬 线 体 : 通常 这 种 字体 笔画 的 提 笔 、 落 笔 处 有 装饰 效果 。 有 衬 线 体 的 字体 相对 严肃 ， 易 读 
性 较 高 ， 大 多 应 用 于 文字 较 多 的 深 阅 读 ， 可 以 使 阅读 视觉 变 得 清晰 、 和 舒适 。 

@ 无 衬 线 体 : 通常 这 种 字体 笔画 较为 机 械 和 统一 ， 线 条 笔直 、 转 角 锐 利 ， 且 笔画 大 小 变化 小 ， 
易于 换行 阅读 的 识别 性 ， 适 合 在 标题 和 小 段 文字 中 使 用 。 

@ 其 他 字体 : 大 多 指 的 是 艺术 字体 或 手写 体 ， 这 些 字 体 创造 力 强 ， 且 变换 大 ， 大 多 应 用 于 文艺 
性 的 H5 页 面 设计 或 关键 文字 信息 突出 时 使 用 。 

如 图 4-12 所 示 的 H5 页 面 中 ， 对 标题 和 正文 使 用 有 衬 线 的 宋体 ， 利 于 提高 阅读 性 。 

图 4-13 所 示 为 无 衬 线 黑体 的 应 用 ， 通 常用 于 信函 、 通 知 单 之 类 较为 正规 的 页 面 中 。 

如 图 4-14 所 示 ， 对 正文 大 段 文字 也 可 以 使 用 无 衬 线 黑体 ， 可 以 显得 整个 页 面 干净 利索 。 
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不 了 的 行业 交 势 、 稍 费心 理 趋势 ， 以 超 强 的 
创造 办 ， 结 合 实 战 既 验 ， 为 车 户 提出 创造 性 
的 问题 解决 方案 。 其 专业 深 座 、 创 造 力 和 实 
战 力 在 业界 受到 一 致 好 评 。 


图 4-12 有 衬 线 宋体 图 4-13 ”无 衬 线 黑体 (1) 图 4-14 无 衬 线 黑体 (2) 
图 4-15 中 应 用 的 是 SHOWG 字 体 ， 文 字 效 果 贴 近 图 片 主题 ， 显 得 画面 主题 更 具 亲 切 感 。 
图 4-16 中 应 用 的 手写 字体 ， 能 够 给 人 一 种 特有 的 韵味 ， 这 种 字体 大 多 应 用 于 赏析 类 的 页 面 。 
图 4-17 所 示 为 钢笔 字体 的 应 用 ， 可 以 通过 自身 的 笔 线 使 整个 画面 更 具 特 色 。 


图 4-15 SHOWG 字 体 图 4-16 手写 字体 图 4-17 钢笔 字体 
2. 英文 字体 
对 英文 字体 ， 主 要 介绍 无 衬 线 体 的 应 用 。 
无 衬 线 英文 字体 非常 适合 在 小 段 文字 中 使 用 ， 使 页 面 整 体 表现 得 清爽 、 利 落 ， 如 图 4-18 所 示 。 


无 衬 线 英文 字体 由 于 比较 醒目 ， 所 以 应 用 于 标题 的 效果 也 非常 好 ， 如 图 4-19 所 示 。 
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图 4-18 无 衬 线 英文 字体 (1) 图 4-19 无 衬 线 英 文字 体 (2) 


4.2.2 ”设置 H5 页 面 的 子 号 


在 大 多 数 的 HS 页面 中 ， 由 于 屏幕 大 小 的 限制 ， 文 字 内 容 较 少 ， 主 要 分 为 标题 和 正文 两 个 部 分 ， 而 
有 的 标题 划分 较 细 的 时 候 ， 还 会 分 为 大 标题 与 小 标题 。 

在 HS 页面 中 ， 大 标题 应 放置 于 页 面 的 视觉 中 心 点 ， 让 用 户 一 眼 能 够 看 到 主题 重点 ， 且 字号 保持 在 
100 一 200 人 磅 ; 而 小 标题 的 字号 通 第 保持 在 30~100 磅 ， 如 图 4-20 所 示 。 

正文 字号 过 大 会 手 盖 标题 ， 过 小 则 会 影响 疯 读 体验 ， 所 以 正文 的 字号 应 保持 在 20 磅 以 上 ， 如 
图 4-21 所 示 。 
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图 4-20 ”设置 标题 字号 的 效果 图 4-21 设置 正文 字号 的 效果 


4.2.3 ”设置 H5 页 面 的 子 间距 


字 间 距 是 指 文 字 之 间 相 互 间 隔 的 距离 ， 字 间距 的 设置 能 够 控制 一 行 或 者 一 个 段落 文字 的 密度 。 中 
文 汉字 与 汉字 之 间 的 间距 ， 需 要 根据 页 面 的 布局 、 文 本 的 数量 以 及 自身 的 需求 进行 设置 。 字 间距 影响 
看 用 户 的 阅读 体验 ， 字 间距 的 设置 一 定 要 保持 一 致 性， 时 长 时 短 的 间距 会 造成 严重 的 阅读 障碍 ， 而 中 
英文 字 之 间 的 间距 有 一 个 固定 的 数值 ， 大 多 数 情况 下 是 不 用 更 改 的 。 


刺 4 草 ”HH5 的 视 匈 交互 设计 


如 图 4-22 所 示 的 页 面 中 ， 三 个 标题 的 字 间 距 都 比较 大 ， 显 得 整个 版 面 懒散 ， 不 仅 视觉 效果 呈现 
差 ， 同 时 也 影响 用 户 阅 读 时 的 观感 。 
如 果 将 图 4-22 所 示 页 面 中 的 标题 字 间 距 调 小 ， 并 统一 字 间 距 ， 可 以 使 整个 页 面 的 布局 效果 非常 精 


神 ， 效 果 如 图 4-23 所 示 。 
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图 4-22” 字 间距 过 大 图 4-23 ”调整 字 间 距 


4.2.4 ”设置 HS 页面 的 行 间距 


行 间距 是 指 邻 近 两 行文 字 中 的 一 行文 字 底 部 到 另 一 行文 字 底 部 的 间距 ， 行 间距 的 设置 通常 依据 字 
间距 的 设 定 而 更 改 。 行 间距 的 设 定 过 小 ， 会 使 页 面 布 局 过 于 紧张 ， 容 易 给 用 户 在 阅读 时 造成 压迫 感 ， 
尤其 会 导致 视觉 疲劳 ， 如 图 4-24 所 示 。 

如 果 将 图 4-24 所 示 页 面 中 的 行 间 距 调 大 ， 可 以 使 整个 页 面 的 布局 更 饱满 ， 同 时 会 使 用 户 阅 读 时 更 
舒适 ， 效 果 如 图 4-25 所 示 。 
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图 4-24 行 间距 过 小 图 4-25 ”调整 行 间 距 


4.2.2 ”H5 子 体 设 计 的 基本 技 1 


为 了 让 H5 的 页 面 布局 变 得 更 有 条 理 ， 同 时 提高 整体 内 容 的 表述 力 ， 从 而 有 利于 用 户 进 行 有 效 的 


Photoshop 


H5 广 告 设 计 


阅读 以 及 接受 其 主题 信息 ， 在 设计 中 还 需要 考虑 整体 编排 的 规整 型 ， 并 适当 加 入 带 有 装饰 性 的 设计 元 
素 ， 用 来 提升 画面 美感 ， 让 文字 编排 更 加 具有 设计 感 。 

要 做 到 这 些 要求 ， 必 须 深 入 了 解 H5 字 体 设计 的 基本 技巧 ， 即 文字 描述 必须 符合 页 面 主题 的 要 求 、 
段落 排列 的 易 恋 性 以 及 整齐 布局 的 审美 性 。 

1. 文字 描述 符合 页 面 主题 

在 H5 页 面 设计 中 ， 文 字 编排 不 但 要 达到 表达 主题 内 容 的 要 求 ， 其 整体 排列 风格 还 必须 要 符合 设计 
对 象 的 形象 ， 才 能 保证 页 面 文字 准确 无 误 地 传达 信息 。 

例如 ， 在 页 面 中 使 用 简洁 的 词组 对 所 设计 的 页 面 主题 进行 介绍 ， 让 词组 与 图 片 产生 关联 性 ， 同 时 
利用 文字 的 准确 描述 来 提高 用 户 对 页 面 的 认 知 和 理解 。 

2. 段 沙 排 列 的 易 读 性 

在 H5 页 面 的 文字 编排 设计 中 ， 易 读 性 是 指 通过 特定 的 排列 方式 使 文字 能 带 给 用 户 更 好 的 阅读 体 
验 ， 让 用 户 阅 读 起 来 更 加 顺 送 、 流 畅 。 

在 实际 的 设计 过 程 中 ， 可 以 通过 宽松 的 文字 间隔 、 大 号 字体 、 多 种 不 同 字体 进行 对 比 阅 读 等 方 
式 ， 让 段落 文字 之 间 产 生 一 定 的 差异 ， 使 得 文字 信息 主 次 清晰 ， 能 够 增强 文字 的 易 读 性 ， 让 用 户 更 快 
地 抓 住 页 面 的 重点 信息 。 

例如 ， 设 计 师 可 以 将 版 面 中 的 部 分 文字 设 定 为 大 号 字体 ， 并 配 以 适当 的 间距 ， 同 时 使 用 修饰 元 素 
对 文字 信息 进行 分 割 ， 使 得 它们 的 阅读 性 得 到 提高 ， 同 时 利于 用 户 掌 握 重要 信息 。 

3. 整齐 布局 的 审美 性 

对 设计 师 来 襄 ， 页 面 的 美感 是 所 有 设计 工作 中 必 不 可 缺 的 重要 因素 。 整 齐 布局 的 审美 性 就 是 指 通 
过 事物 的 美感 来 吸引 用 户 ， 使 其 对 画面 中 的 信息 和 商品 产生 兴趣 。 在 字体 编排 方面 ， 设 计 者 可 以 为 字 
体 本 身 添 加 一 些 融 有 艺术 性 的 设计 元 素 ， 从 结构 上 增添 它 的 美感 。 

例如 ， 通 过 添加 一 些 相 关 的 设计 元 素 ， 将 其 与 单一 的 文字 组 合 在 一 起 ， 利 用 位 置 的 巧妙 安排 ， 提 
升 整体 文字 的 艺术 性 。 


H5 页 面 的 色彩 设计 


对 于 H5 页 面 的 设计 来 说 ， 色 彩 的 选择 搭配 是 一 个 非常 重要 的 元 素 ， 页 面 的 基调 不 取决 于 图 文 的 样 
式 ， 而 是 色彩 的 搭配 。 本 节 我 们 将 逐步 从 色彩 的 原理 、 色 彩 三 要 素 、 色 彩 关 系 、 色 彩 心 理 、 色 彩 搭配 
技巧 以 及 实用 H5 配 色 技 巧 的 角度 对 H5 页 面 的 色彩 设计 进行 剖析 。 


4.3.1 了 解 色彩 原理 


其 实 对 于 色彩 ， 早 在 很 久之 前 中 外 的 科学 家 们 就 已 经 开始 关注 研究 ， 但 直到 18 世 纪 喘 国 科 学 家 牛 
顿 真正 地 对 色彩 进行 科学 解释 后 ， 才 让 大 众 对 色彩 有 了 一 定 的 概念 性 了 解 。 牛 顿 进 行 的 大 量 科 学 研究 
成 果 报 告 ， 使 我 们 知道 色彩 是 以 色光 为 主体 的 客观 存在 ， 对 于 人 则 是 一 种 视觉 现象 ， 是 一 种 光 、 眼 、 
物 三 者 之 间 的 综合 关系 。 
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4.3.2 了 解 色彩 三 要 素 


人 眼 所 看 到 的 任何 彩色 光 都 是 色彩 三 要 素 特 性 的 综合 效果 ， 而 色彩 三 要 素 包 括 : 色相 、 明 度 以 及 


纯度 ， 如 图 4-26 所 示 。 
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图 4-26 ”色彩 三 要 素 

1. 色相 

色相 也 就 是 色彩 本 身 ， 是 色彩 性 格 的 外 在 体现 。 色 相 是 色彩 的 首要 特征 ， 是 区 别 各 种 不 同色 彩 最 
准确 的 标准 。 

从 光学 意义 上 讲 ， 即 便 是 同一 类 色彩 ， 也 能 分 为 几 种 色相 ， 如 黄色 可 以 分 为 中 黄 、 土 黄 、 柠 树 黄 
等 。 人 的 眼睛 可 以 分 辨 出 约 180 种 不 同色 相 的 色彩 。 

最 初 的 基本 色相 为 : 红 、 检 、 黄 、 绿 、 蓝 、 紫 。 在 各 色 中 间 加 插 一 两 个 中 间 色 ， 按 光谱 顺序 为 : 
红 、 红 检 、 柳 、 黄 检 、 黄 、 黄 绿 、 绿 、 蓝 绿 、 蓝 、 赣 紫 、 紫 和 红 紫 ， 可 制 出 12 种 基本 色相 。 

将 12 种 基本 的 色相 按照 环 状 排列 起 来 ， 就 形成 了 色相 环 。 色 相 环 由 原色 、 间 色 、 复 色 构 成 ， 它 是 
我 们 选择 色彩 的 一 个 强 有 力 的 工具 ， 如 图 4-27 所 示 。 

1) 原色 

色相 环 首先 包含 的 是 色彩 三 原色 ， 即 红 、 黄 、 蓝 。 色 彩 中 不 能 再 分 解 的 基本 色 称 为 原色 。 原 色 能 
合成 出 其 他 颜色 ， 而 其 他 颜色 不 能 还 原 出 本 来 的 色彩 。 

三 原色 是 色相 环 的 “ 母 色 ”， 它 们 是 唯一 不 能 由 其 他 颜色 调 出 来 的 色彩 ， 三 原色 围绕 色相 环 平均 
分 布 ， 两 两 之 间 夹 角 为 120”， 如 图 4-28 所 示 。 
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图 4-27 ”12 色相 环 
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由 于 三 原色 的 不 可 协调 性 ， 在 信息 图 的 色彩 使 用 中 ， 画 面 会 给 人 浮躁 的 感觉 ， 搭 配 绿色 、 紫 色 和 
橙色 三 种 间 色 ， 可 以 使 画面 色彩 饱满 且 具 有 秩序 性 。 

2) 间 色 

原色 混合 产生 了 间 色 ， 间 色 位 于 色相 环 中 两 种 三 原色 中 间 的 地 方 ， 如 图 4-29 所 示 。 每 一 种 间 
色 都 是 由 离 它 最 近 的 两 种 原色 等 量 混合 而 成 的 ， 例 如 ， 黄 色 和 红色 等 量 混合 形成 橙色 ， 那 么 橙色 就 为 
间 色 。 

3) 复 色 

复 色 又 叫 三 次 色 ， 是 由 相 邻 的 两 种 色彩 混合 而 成 的 ， 它 可 以 由 两 个 间 色 混合 而 成 ， 也 可 以 由 一 种 
原色 和 其 对 应 的 间 色 混合 而 成 ， 例 如 ， 原 色 黄 色 和 间 色 橙色 可 以 混合 出 黄 橙色 ， 那 么 黄 橙色 就 称 为 复 
色 ， 如 图 4-30 所 示 。 
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图 4-29 间 色 


2. 明度 
明度 就 是 色彩 的 明暗 差别 、 光 亮 程度 ， 所 有 色彩 都 有 自己 的 光亮 。 其 中 ， 暗 色 被 称 为 低 明 度 ， 亮 
色 被 称 为 高 明度 。 外 部 较 大 的 两 个 环 由 深 色 组 成 ， 内 部 较 小 的 两 个 环 由 浅 色 组 成 ， 如 图 4-31 所 示 。 


图 4-31 明度 对 比 
有 彩色 的 明度 有 两 方面 的 差别 ， 一 方面 是 某 一 色相 在 混入 黑色 或 者 白色 后 ， 产 生 的 深浅 变化 ， 如 


图 4-32 所 示 。 
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图 4-32 深浅 变化 
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另 一 方面 不 同 彩 色 之 间 的 明度 存在 差别 ， 比 如 在 红 、 橙 、 黄 、 绿 、 蓝 、 紫 6 种 标准 色 中 ， 黄 最 
浅 ， 紫 最 深 ， 检 和 绿 、 红 和 蓝 处 于 相近 的 明度 之 间 。 我 们 可 以 将 有 彩色 转换 为 无 彩色 ， 来 更 加 直观 地 
观察 明度 变化 ， 如 图 4-33 所 示 。 


图 4-33 不 同色 相 的 明度 差别 


明度 是 决定 配色 的 光 感 、 明 快感 、 清 晰 感 以 及 心理 作用 的 关键 要 素 。 简 单 来 说 ， 明 度 就 是 通过 对 
比 的 手法 ， 把 握 作品 中 黑 、 白 、 灰 的 关系 。 

依据 明度 色 标 ， 可 以 大 致 将 明度 分 为 三 个 区 域 : 0 一 3 度 为 低 明 度 ; 4 一 6 度 为 中 明度 ; 7 一 10 度 为 
高 明度 ， 如 图 4-34 所 示 。 

按照 明度 不 同 ， 明 度 配 色 可 分 为 同 明度 (画面 色彩 采用 同一 个 明度 ) 、 近 似 明 度 ( 相 差 3 度 以 
内 ) 、 中 差 明度 〈 相 差 3 一 5$ 度 ) 和 对 比 明度 〈 相 差 5 度 以 上 ) 4 种 。 


图 4-34 明度 变化 


3. 纯度 

纯度 也 称 饱 和 度 或 彩 度 、 鲜 艳 度 。 色 彩 的 纯度 强 弱 ， 是 指 色 相 感 党 明确 或 含糊 、 鲜 艳 或 混浊 的 程度 。 

根据 色相 环 的 色彩 排列 ， 相 邻 色 相 混 合 ， 纯 度 基本 不 变 。 比 如 ， 红 色 和 黄色 混合 ， 将 得 到 相同 纯 
度 的 橙色 ， 如 图 4-35 所 示 。 

对 比 色 相 混合 ， 最 易 降 低 纯 度 ， 以 至 成 为 灰暗 色彩 ， 例 如 ， 红 色 和 绿色 混合 ， 则 得 到 浊 色 ， 如 
图 4-36 所 示 。 


图 4-35 ” 相 邻 色 混 合 ， 纯 度 不 变 图 4-36 ”对 比 色 混 合 ， 降 低 纯度 


he we 色彩 的 纯度 变化 ， 可 以 产生 丰富 的 强 弱 不 同 的 色相 ， 而 且 能 够 使 色彩 产生 独特 
EZ : 
: 纯度 越 高 ， 色 彩 愈 显 鲜艳 、 引 人 注意 ， 独 立 性 及 冲突 性 愈 强 ; 纯度 愈 低 ， 色 彩 愈 显 朴 素 而 典 : 
， 雅 、 安 静 而 温和 ， 独 立 性 及 冲突 性 愈 弱 。 因 此 ， 主 体 色 通常 以 高 纯度 配色 来 达到 突显 的 效果 。 : 
”纯度 本 身 的 刺激 作用 不 如 明度 的 变化 大 ， 因 此 纯度 变化 应 该 搭配 明度 变化 和 色相 变化 ， 才 能 
“达到 加 活 没 的 配色 效果 。 
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以 红色 为 例 ， 从 纯 红 色 到 灰色 分 为 10 个 阶段 ， 根 据 纯度 之 间 的 差别 ， 可 以 形成 不 同 的 纯度 对 比 的 
纯度 色调 和 纯度 序列 。 相 差 4 个 阶段 以 内 的 纯度 为 近似 纯度 ，8 个 阶段 以 内 的 纯度 为 对 比 纯度 ， 如 
图 4-37 所 示 。 
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图 4-37 纯度 变化 


从 视觉 的 角度 来 说 ， 用 户 最 先 感 知 的 便 是 H5 页 面 中 的 色彩 ， 任 何 色彩 都 具备 色相 、 明 度 和 纯度 3 
个 基本 要 素 。 如 何 正确 地 运用 常见 的 配色 方案 ， 是 设计 H5 页 面 必 备 的 技能 。 

1. H5 中 的 对 比 配色 技巧 

在 我 们 生活 的 世界 中 ， 时 时 处 处 都 充满 着 各 种 不 同 的 色彩 。 人 们 在 接触 这 些 色彩 的 时 候 ， 常 常 都 
会 以 为 色彩 是 独立 的 ， 天空 是 蓝 色 的 ， 植 物 是 绿色 的 ， 而 花 采 是 红色 的 。 

其 实 ， 色 彩 就 像 音符 一 样 ， 唯 有 将 一 个 个 的 音符 组 合 才能 谱 出 美妙 的 乐章 ， 色 彩 亦 是 。 实 际 上 没 
有 一 个 色彩 是 独立 存在 的 ， 也 没有 哪 一 种 颜色 本 身 是 好 看 的 颜色 或 是 不 好 看 的 颜色 ， 而 相反 地 ， 只 有 
当 某 个 色彩 成 为 一 组 颜色 中 的 一 个 时 ， 我 们 才 会 说 这 个 色彩 在 这 里 协调 或 是 不 协调 、 适 合 或 不 适合 。 

前 面 介 绍 过 色彩 是 由 色相 、 明 度 以 及 纯度 3 种 属性 所 组 
成 的 ， 其 中 的 色相 是 人 在 最 早 认识 色彩 的 时 候 所 理解 到 的 =- ， N 
属性 ， 也 就 是 色彩 的 名 称 ， 例 如 红色 、 黄 色 、 蓝 色 等 。 | 县 :2 种 ef 环 周 加 rr。 ny We 
图 4-38 所 示 为 最 常见 的 12 色 相 环 的 互补 色 。 

因为 互补 色 有 强烈 的 分 离 性 ， 所 以 使 用 互补 色 的 配色 图 4-38 色相 环 互补 色 
设计 ， 可 以 有 效 加 强 整体 配色 的 对 比 度 、 产 生 距 离 感 ， 而 且 能 表现 出 特殊 的 视觉 对 比 与 平衡 效果 ， 使 
用 得 好 能 让 作品 令 人 感觉 活泼 、 充 满 生命 力 。 

使 用 差异 较 大 的 单 色 背 景 对 元 素 进行 突显 ， 使 色相 之 间 产 生 较 大 的 差异 ， 这 样 产生 的 对 比 效果 就 
是 色相 对 比 配色 ， 它 可 以 让 画面 色彩 丰富 ， 具 有 感官 刺激 性 ， 能 够 很 容易 地 吸引 用 户 的 眼球 ， 如 


图 4-39 所 示 。 
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图 4-39 ”对 比 配色 的 页 面 效 果 
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当然 如 果 将 色彩 的 条 件 稍微 放宽 一 点 ， 比 如 说 180"” 互补 色 的 邻近 色 系 也 搭 入 配色 考虑 的 话 ， 可 
以 形成 的 色彩 配色 就 更 宽广 、 更 丰富 了 。 

由 于 互补 色彩 之 间 的 对 比 相当 强烈 ， 因 此 想 要 适当 地 运用 互补 色 ， 必 须 慎 重 考虑 色彩 的 比例 问 
题 。 当 使 用 对 比 色 配色 时 ， 必 须 利用 面积 较 大 的 一 种 颜色 与 另 一 个 面积 较 小 的 互补 色 来 达到 平衡 。 如 
果 两 种 色彩 所 占 的 比例 相同 ， 那 么 对 比 会 显得 过 于 强烈 。 

页 面 使 用 大 面积 的 黑色 与 小 面积 的 白色 形成 对 比 。 同 一 种 色彩 ， 面 积 大 而 光量 、 色 量 亦 增强 ， 易 见 
性 及 稳定 性 高 ， 当 较 大 面积 的 色彩 成 为 主 色 时 受 周 围 色彩 影响 小 ， 色 彩 的 面积 差异 越 大 越 容易 调和 。 

图 4-40 所 示 为 采用 了 面积 对 比 配色 方案 的 横向 H5 页 面 ， 可 以 让 重点 元 素 的 特点 更 加 醒目 和 清晰 ， 
产生 较 大 的 视觉 冲击 力 ， 能 够 起 到 引 人 注 目的 效果 。 


图 4-40 面积 对 比 配 色 的 页 面 效 果 

例如 ， 红 与 绿 如 果 在 画面 上 占有 同样 面积 ， 就 容易 让 人 头晕 目眩 。 可 以 增加 其 中 一 种 颜色 的 面 
积 ， 构 成 主 调 色 ， 而 另 一 种 颜色 的 面积 缩小 ， 作 为 对 比 色 。 通 常情 况 下 ， 会 以 3 :7 或 者 2 : 8 的 比例 来 作 
为 分 配 原则 。 

2. H5 中 的 调和 配色 技巧 

“ 调 ” 具 有 有 调整、 调理、 调停、 调配、 安顿 、 安 排 、 搭 配 、 组 合 等 意思 :; “和 ”可 理解 为 和 易 、 
和 和顺、 和谐、 和平、 融洽、 相安 、 适 宜 、 有 秩序 、 有 规矩 、 有 条 理 、 恰 当 ， 没 有 尖锐 的 种 突 ， 相 互 依 
存 ， 相 得 益 彰 等 。 

配色 的 目的 就 是 为 了 制造 美的 色彩 组 合 ， 而 和 谐 是 色彩 美的 首要 前 提 ， 色 彩 的 和 谐 让 人 感觉 到 愉 
悦 ， 同 时 还 能 满足 人 们 视觉 上 的 需求 以 及 心理 上 的 平衡 。 

我 们 知道 ， 和 谐 来 目 对 比 ， 和 谐 就 是 美 。 没 有 对 比 就 没有 刺激 神经 兴奋 的 因素 ， 但 只 有 兴奋 而 没 
有 舒适 的 休息 会 造成 过 分 的 疲 务 ， 会 造成 精神 的 紧张 。 

如 此 看 来 ， 既 要 有 对 比 来 产生 和 谐 的 刺激 一 一 美的 享受 ， 又 要 有 适当 的 调和 来 抑制 过 分 的 对 
比 一 一 刺激 ， 从 而 产生 一 种 恰到好处 的 对 比 一 一 和 谐 的 、 美 的 享受 。 总 的 来 说 ， 色 彩 的 对 比 是 绝对 
的 ， 而 调和 是 相对 的 ， 调 和 是 实现 色彩 美的 重要 手段 。 

1) 以 色相 为 基础 的 调和 配色 

在 保证 色相 大 致 不 变 的 前 提 下 ， 通 过 改变 色彩 的 明度 和 纯度 来 达到 配色 的 效果 ， 这 类 配色 方式 保 
持 了 色相 上 的 一 致 性 ， 所 以 色彩 在 整体 效果 上 很 容易 达到 调和 。 

以 色相 为 基础 的 配色 方案 主要 有 以 下 几 种 。 

(1) 同一 色相 配色 : 指 相同 的 颜色 在 一 起 的 搭配 ， 比 如 蓝 色 的 上 衣 配 上 监 色 的 裤子 或 者 初子 ， 
这 样 的 配色 方法 就 是 同一 色相 配色 法 。 
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(2) 类 似 色 相配 色 : 指 色相 环 中 类 似 或 相 邻 的 两 个 或 两 个 以 上 的 色彩 措 配 。 例 如 ， 黄 色 、 橙 黄 
色 、 橙 色 的 组 合 ; 紫色 、 紫 红色 、 紫 蓝 色 的 组 合 等 都 是 类 似 色相 配色 。 类 似 色相 的 配色 在 大 自然 中 有 
特别 多 ， 有 嫩绿 、 鲜 绿 、 黄 绿 等 ， 这 些 都 是 类 似 色相 配色 的 自然 造化 。 

(3) 对 比 色相 配色 : 指 在 色相 环 中 ， 位 于 色相 环 直径 两 端的 色彩 或 较 远 位 置 的 色彩 搭配 。 它 包 
含 中 差 色 相配 色 、 对 照 色相 配色 、 辅 助 色相 配色 。 在 24 色 的 色相 环 中 ， 两 色相 相差 4 一 7 个 色 ， 称 为 基 
色 的 中 差 色 ;在 色相 环 上 有 90” 左右 角度 差 的 配色 就 是 中 差 配色 ; 它 的 色彩 对 比 效果 明快 ， 是 深 受 人 
们 喜爱 的 颜色 。 在 色相 环 上 ， 色 相差 为 8 一 10 的 色相 组 合 ， 被 称 为 对 照 色 ; 从 角度 上 说 ， 相 差 135” 左 
右 的 色彩 配色 就 是 对 照 色 。 色 相差 为 11 一 12， 角 度 为 165” 一 180” 的 色相 组 合 ， 称 为 辅助 色 配色 。 

如 图 4-41 所 示 的 HS 作品， 画面 中 的 图 像 与 背景 都 使 用 黄色 作为 主 色 调 ， 而 文字 使 用 白色 ， 使 画面 
产生 强烈 的 差异 ， 也 使 得 配色 不 单调 ， 能 突出 重要 信息 。 


图 4-41 色相 调和 配色 

2) 以 明度 为 基础 的 调和 配色 

明度 是 人 类 分 辨 物体 最 敏锐 的 色彩 反应 ， 它 的 变化 可 以 表现 事物 的 立体 感 和 远近 感 。 如 希腊 的 
雕刻 艺术 就 是 通过 光影 的 作用 产生 了 许多 黑白 灰 的 相互 关系 ; 中 国 的 国画 也 经 常 使 用 无 彩色 的 明度 搭 
配 。 有 彩色 的 物体 会 受到 光影 的 影响 产生 明暗 效果 ， 如 紫色 和 黄色 就 有 明显 的 明度 差 。 

明度 可 以 分 为 高 明度 、 中 明度 和 低 明 度 3 类 ， 这 样 明度 就 有 了 高 明度 配 高 明度 、 高 明度 配 中 明 
度 、 高 明度 配 低 明 度 、 中 明度 配 中 明度 、 中 明度 配 低 明度 、 低 明度 配 低 明 度 6 种 搭配 方式 。 其 中 ， 高 
明度 配 高 明度 、 中 明度 配 中 明度 、 低 明度 配 低 明 度 ， 属 于 相同 明度 配色 。 在 页 面 设计 中 ， 一般 使 用 明 
度 相 同 、 色 相 和 纯度 变化 的 配色 方式 ， 如 图 4-42 所 示 。 


双 线 泗 游 空间 无 敌 观 景 飘 窗 
生活 补 特 别 的 彰 重 优待 把 心 芒 撞 拓 到 无 法 自持 


图 4-42 ”明度 调和 配色 
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图 4-42 所 示 画 面 中 ， 背 景 图 片 的 配色 均 为 高 明度 调和 配色 ,市 给 和 清爽、 亮丽 、 干 净 的 印象 ， 营 
造 出 优雅 、 含 蓄 的 氛围 ， 是 一 组 和 柔和、 明朗 的 色彩 组 合 方式 ， 非 常 符 合 页 面 中 家 装 的 形象 和 特点 。 

画面 中 通过 间 际 来 对 布局 进行 分 割 ， 利 用 相同 明度 的 不 同色 相 完 成 配色 ,得 到 一 种 安静 的 视觉 
体验 。 

3) 以 纯度 为 基础 的 调和 配色 

纯度 的 强 弱 代表 着 色彩 的 显 灰 程度 ， 在 一 组 色彩 中 当 纯 度 的 水 平 相 对 一 致 时 ， 色 彩 的 搭配 也 就 很 
人 全 荐 全 度 丙 全 的 个 网 ， RA 呈现 感 


i ECCS ( Practical Color Coordinate i 实用 色 彩 配色 体 系 色 彩 体 系 提 出 : 
EEC 
: 凡 色 调配 色 ， 要领 有 三 ， 即 同一 色调 配色 、 类 似 色 调配 色 以 及 对 比 色调 配色 。 : 
:> 同一 色调 配色 : 同一 色调 配色 是 将 相同 色调 的 不 同 颜色 搭配 在 一 起 形成 的 一 种 配色 关系 。 同 一 : 
。 ”色调 的 颜色 ， 色 彩 的 纯度 和 明度 具有 共同 性 ， 明 度 按照 色相 略 有 变化 。 不 同色 调 会 产生 不 同 的 

色彩 印象 ， 将 纯色 调 全 部 放 在 一 起 ， 会 产生 活泼 感 ， 如 婴儿 服饰 和 玩具 都 以 淡色 调 为 主 。 在 对 : 
。 上 比 色 相 和 中 差 色相 的 配色 中 ， 一 般 采 用 同一 色调 的 配色 手法 进行 色彩 调和 。 
:> 类 似 色调 配色 : 即 以 色调 配 图 中 相 邻 或 接近 的 两 个 或 两 个 以 上 色调 搭配 在 一 起 的 配色 。 类 似 色 
: 。 调 的 特征 在 于 色调 和 色调 之 间 差异 微小 ， 较 同一 色调 有 变化 ， 不 易 产 生 呆 洁 感 。 : 
:> 对 比 色调 配色 : 对 比 色调 配色 是 指 相隔 较 远 的 两 个 或 两 个 以 上 的 色调 搭配 在 一 起 的 配色 。 对 比 
: 色调 配色 在 配色 选择 时 ,会 因 纵 向 或 横向 对 比 有 明度 及 彩 度 上 的 差异 ， 比 如 : 浅 色 调和 深 色调 
配色 ， 即 为 深 与 浅 的 明暗 对 比 。 


“4) 无 彩色 的 调和 配色 

无 彩色 的 色彩 个 性 并 不 明显 ， 将 无 彩色 与 任何 色彩 搭配 都 可 以 取得 调和 的 色彩 效果 。 通 过 无 彩色 
与 无 彩色 搭配 ， 可 以 传达 出 一 种 经 典 的 永恒 美感 ， 将 无 彩色 与 有 彩色 搭配 ， 可 以 将 无 彩色 作为 主要 的 
色彩 来 调和 色彩 间 的 关系 。 

在 H5 页 面 的 设计 中 ， 有 时 为 了 达到 某 种 特殊 的 效果 ， 或 者 突显 出 某 个 特殊 的 对 象 ， 可 以 通过 无 彩 
色调 和 配色 来 对 设计 的 画面 进行 创作 。 

使 用 无 彩色 作为 画面 背景 和 辅助 文字 的 颜色 ， 而 其 余 的 图 像 使 用 有 彩色 ， 这 样 的 配色 让 产品 的 细 
节 和 主题 文字 更 加 突出 ， 如 图 4-43 所 示 。 


THE TEMPTATION OF ICE CREAMM 
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图 4-43 无 彩色 调和 配色 
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H5 页 面 的 交互 设计 


交互 设计 是 H5 页 面 的 重 中 之 重 ， 我 们 必须 以 用 户 体 验 为 基本 出 发 扩 来 进行 开发 ， 着 重 设计 H5 的 
所 有 细节 流程 ， 尽 可 能 将 如 何 做 活动 、 用 户 如 何 参与 、 规 则 等 都 写 清楚 ， 让 用 户 的 互动 体验 更 加 流畅 。 


4.4.1 了 解 H5 交 互 设计 


交互 设计 是 指 用 户 与 产品 或 服务 之 间 产 生 互 动 的 一 种 机 制 ， 简 单 地 说 束 是 人 与 机 器 的 交流 互动 方 
式 ， 就 是 用 户 的 每 一 步 操 作 ， 产 品 或 服务 都 会 做 出 相应 的 有 反应。 而 H5 交 互 设计 束 古 建立 在 H5 页 面 基础 
上 的 交互 设计 。H5 的 交互 设计 要 以 用 户 体 验 为 基础 ， 同 时 考虑 用 户 的 背景 、 使 用 经 验 以 及 操作 过 程 中 
的 体验 感受 ， 从 而 设计 出 符合 用 户 使 用 逻辑 ， 且 高 效 使 用 完成 的 产品 。 

交互 设计 大 多 用 于 移动 手机 端 ， 且 交互 元 素 也 是 H5 页 面 盛行 的 关键 因素 之 一 ， 交 互 元 素 加 深 了 用 
户 与 界面 的 互动 交流， 将 以 往 被 动 接受 信息 的 形式 ， 转 变 为 用 户 参 与 到 互动 中 ， 主 动 接受 信息 传递 ， 
达到 远 超 过 以 往 的 推广 效果 。 


4.4.2 ”制作 H5 交 互 设 计 


下 面 以 人 人 秀 为 例 ， 制 作 抽 奖 活 动 H5 页 面 的 交互 设计 。 其 操作 步骤 如 下 : 
9 STEP 01 首先 要 新 建 一 个 人 人 秀 的 HS 场景 ， 并 制作 好 作品 的 背景 ， 单 击 屏 幕 最 右 侧 
的 “互动 ”按钮 ， 如 图 4-44 所 示 。 
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图 4-44 ” 单 击 “互动 ”按钮 
9 STEP 02 在 互动 菜单 中 单 击 “ 抽 奖 ” 标 签 ， 添加 抽奖 插件 ， 如 图 4-45 所 示 。 
©e STEP 03 单 击 屏 幕 右 侧 的 “抽奖 设置 ”按钮 ， 在 弹出 的 对 话 框 中 完善 互动 插件 设置 ， 如 图 4-46 所 示 。 
9 STEP 04 首先 是 基本 设置 ， 包 括 填写 活动 名 称 、 设 置 开始 时 间 和 结束 时 间 以 及 显示 方式 ， 如 图 4-47 所 示 。 
9 STEP 05 需要 注意 的 是 ， 活 动 名 称 将 是 用 户 在 后 全 查看 数据 时 的 分 组 依据 ， 必 须 准确 填写 ; 如 果 用 
户 的 参与 时 间 不 在 设置 范围 之 内 ， 将 无 法 参与 抽奖 活动 。 在 显示 方式 菜单 中 ， 可 以 选择 大 转盘 、 九 富 
格 、 摇 一 摇 等 多 种 不 同 的 抽奖 皮肤 ， 如 图 4-48 所 示 。 


第 4 章 “”H5 的 视 多 区 互 设 计 


图 4-45 ”添加 “抽奖 ”插件 


图 4-46 单 击 “抽奖 设置 ”按钮 


图 4-47 基本 设置 图 4-48 ”显示 方式 设置 

9 STEP 06 接 下 来 是 奖品 设置 ， 包 括 奖 品 图 片 、 文 字 颜 色 、 奖 品名 称 、 奖 品类 型 、 奖 品 数量 以 及 中 奖 概 
率 ， 如 图 4-49 所 示 。 

9 STEP 07 奖品 图 片 可 以 单 击 “ 笑 脸 ” 图 标 ， 在 弹出 的 对 话 框 中 进行 选择 上 传 替 换 ， 也 可 以 在 人 人 秀 自 
带 的 图 片 库 中 选择 人 替换， 图片 标准 大 小 为 50 像 素 x 50 像 素 ， 超 过 则 会 自动 压缩 ， 如 图 4-50 所 示 。 

@ STEP 08 如 果 要 设置 文字 颜色 ， 人 @ 可 以 单 击 文字 ; 全 在 弹出 的 对 话 框 中 选取 所 需 的 颜色 进行 更 换 ， 也 
可 单 击 “更 多 ”按钮 ， 进 行 自 由 选 色 ， 如 图 4-51 所 示 。 

9 STEP 09 对 于 奖品 名 称 、 奖 品 数 量 以 及 中 奖 概 率 ， 只 需要 用 鼠标 单 击 输入 框 ， 就 可 以 根据 需要 进行 输 


入 设置 ， 如 图 4-52 所 示 。 
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图 4-49 ”奖品 设置 
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图 4-51 文字 颜色 图 4-52 更 改 所 需 设 置 
9 STEP 10 可 以 单 击 “ 奖 品类 型 ” 右 侧 的 箭头 ， 展 开 “ 奖 品类 型 ”选项 ， 有 非 奖品 、 实 物 奖 、 竞 奖券、 
红包 、 微 信 卡 券 、 第 三 方 发 奖 以 及 积分 共 七 种 ， 如 图 4-53 所 示 。 
e STEP 11 选择 奖品 类 型 后 ， 会 出 现 相 应 的 奖品 设置 ， 若 想 要 更 改 设 置 ， 可 单 击 右 侧 的 驴 按 钮 更 改 。 例 
如 ， 在 奖品 类 型 中 选择 “实物 奖 ” 选 项 后 ， 还 可 以 设置 兑奖 方式 、 领 奖 人 信息 以 及 中 奖 提示 等 选项 ， 
如 图 4-54 所 示 。 
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图 4-53 展开 “奖品 类 型 ”选项 图 4-54 ”奖品 设置 
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9 STEP 12 接 下 来 是 抽奖 设置 ， 用 户 可 以 分 别 对 抽奖 次 数 、 总 中 奖 次 数 和 每 日 中 次 次 数 3 个 选项 进行 设 
置 ， 同 时 还 有 添加 了 分 享 后 额外 获得 一 次 抽奖 机 会 的 选项 ， 以 及 防 作 兹 选项 ， 如 图 4-55 所 示 。 

9 STEP 13 接 下 来 是 领 奖 设置 ， 可 以 在 此 选择 所 需要 的 用 户 信息 ， 当 鼠标 移动 到 领 奖 信息 的 某 个 选项 上 
时 ， 会 显示 此 项 的 详细 介绍 ， 参 与 者 在 领 奖 时 ， 需 要 先 填 写 领 奖 信息 表单 ， 如 图 4-56 所 示 。 
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图 4-55 ”抽奖 设置 图 4-56 ” 领 奖 设置 


专家 指点 ) 在 人 人 秀 H5 制 作 平台 中 ， 在 “抽奖 ”互动 插件 的 领 奖 设置 中 可 以 选中 “报名 
>/ 后 参与 ”， 使 用 户 即便 在 参与 抽奖 后 没有 中 奖 ， 也 可 以 留 下 联系 方式 ， 方 便 企 业 或 
。 商家 进行 追踪 销售 ， 景 大 限度 地 提升 活动 效果 ， ， 挽 回流 失 客户 。 . 


© STEP 14 最 后 是 样式 设置 ， 在 导航 栏 中 可 以 选择 多 种 抽奖 样 
式 ， 例如: 大 转盘 、 九 富 格 、 摇 一 摇 、 水 果 机 、 刊 刮 乐 、 砸 
金 蛋 等 ， 如 图 4-57 所 示 。 

9 STEP 15 选中 所 需 样 式 ， 单 击 “ 保 存 ” 按 钮 即 可 ， 效 果 如 图 
4-58 所 示 。 

9 STEP 16 制作 完成 后 ， 可 以 单 击 制作 页 面 右上 角 的 “预览 ” 
按钮 ， 预 览 抽奖 活动 的 效果 ， 奖 品 图 片 不 仅 显 示 在 大 转盘 
中 ， 用 户 在 领取 奖品 时 也 能 看 到 ， 并 可 以 在 设置 好 的 领 奖 信 
息 中 填写 联系 方式 ， 如 图 4-59 所 示 。 


图 4-57 样式 设置 


预 第 模式 ， 仅 供 测 试 预览 模式 ， 仅 供 测试 预览 模式 ， 仅 供 测试 
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图 4-58 样式 效果 图 4-59 ”预览 抽奖 活动 
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H5 页 面 的 视觉 流程 设计 


视觉 流程 设计 也 是 H5 页 面 版 式 设计 中 的 一 种 ,但 与 其 他 设计 原则 和 网 格 设计 不 同 的 是 ， 视 觉 流 程 
设计 是 单 从 用 户 视 觉 角度 进行 设计 ， 视 觉 流 程 设计 依据 的 是 用 户 长 久 以 来 的 视觉 习惯 和 规律 ， 从 而 对 
页 面 进行 排版 。 

下 面 详细 介绍 有 关 的 视觉 流程 设计 内 容 。 


4.5.1 什么 是 视 更 流程 设计 


视觉 流程 是 指 H5 页 面 设计 相关 元 素 排 列 的 一 种 视觉 顺序 ， 能 够 吸引 用 户 注 意 、 引 导 用 户 阅 读 操 
作 、 促 进 页 面 主题 信息 传达 、 保 证 页 面 形 式 与 内 容 统一 。 主 要 是 对 页 面 中 的 相关 元 素 ， 文 字 、 图 片 、 
图 形 、 线 条 和 色彩 等 进行 主 次 关系 的 划分 ， 进 行 先后 顺序 的 排列 ， 而 视觉 流程 的 形成 是 由 用 户 的 视觉 
习惯 决定 的 。 


4.5.2 HH5 吊 见 的 视 殉 流程 设计 类 型 


一 般 而 言 ， 根 据 H5 页 面 中 相关 元 素 排 列 顺序 的 不 同 ， 视 觉 流程 设计 可 以 分 为 以 下 几 种 不 同类 型 。 

1. 单 回 视觉 构 图 

单 辐 视觉 流程 的 特点 是 使 页 面 更 为 简明 ， 直 接 表 达 主 题 内 容 ， 达 到 简洁 义 强 烈 的 视觉 效果 ， 其 表 
现 有 以 下 3 个 方式 。 

@ 竖 站 视觉 构图 : 具有 稳定 性 的 构图 ， 给 用 户 直 日 、 明 了 的 感觉 ， 如 图 4-60 所 示 。 

@ 横 癌 视觉 构图 : 安宁 、 平 静 的 构图 ， 给 用 户 稳定 、 平 和 的 感 党 ， 如 图 4-61 所 示 。 


一 


图 4-60” 竖 向 视觉 构图 图 4-61 横向 视觉 构图 
@ 人 矢 癌 视觉 构图 : 强 固 而 不 稳定 的 动态 构图 ， 给 用 户 造 成 强烈 的 视觉 冲击 ， 吸 引用 户 注 意 ， 如 
图 4-62 所 示 。 
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图 4-62 ” 斜 向 视觉 构图 


2. 曲线 视觉 构图 
曲线 视觉 构图 区 别 于 单 同 视觉 构图 的 是 ， 单 同 视觉 构图 简洁 明了 ， 而 曲线 视觉 构图 是 各 元 素 依据 


弧 线 或 回旋 线 变 化 运动 产生 的 视觉 流动 ， 更 具 节 奏 和 韵律 美 ， 如 图 4-63 所 示 。 


图 4-63 ”曲线 视觉 构图 


3. 反复 视 完 构图 
相同 或 相近 元 素 在 版 面 中 重复 出 现 ， 具 有 趣味 性 和 节奏 感 ， 就 是 反复 视觉 流程 的 特点 ， 重 复 有 强 


调 的 作用 ， 能 够 给 用 户 留 下 深刻 的 印象 ， 如 图 4-64 所 示 。 


图 4-64 反复 视觉 构图 
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4. 导 回 视觉 构图 
导 同 视觉 构图 是 采用 不 同 手法 对 用 户 起 到 引导 的 作用 ， 由 主 及 次 ， 引 导 用 户 对 页 面 进行 阅读 汲取 
言 息 ， 如 图 4-65 所 示 。 
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图 4-65 ”导向 视 沉 构图 


5. 散 点 视觉 构图 
散 氮 视觉 构图 是 指 各 元 素 之 间 上 自由 分 散 的 排列 方式 ， 整 体 版 面 呈现 出 感情 性 、 无 序 性 、 个 性 化 的 


非 第 规 状 态 ， 如 图 4-66 所 示 。 
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散 点 视觉 构图 


随 着 HS 的 兴起 ， 各 企业 纷纷 加 入 HS 的 潮流 中 ， 那 么 如 何在 众多 的 HS 页 面 
中 脱颖而出 呢 ? 本 章 就 来 详细 介绍 针对 不 同 的 营销 场景 ， 如 何 对 HS 页 面 进行 
创意 性 的 内 容 设 计 ， 项 望 读者 熟练 掌握 本 章 内 容 。 


创建 H5 活 动 营销 页 面 
创建 H5 趣 味 营销 页 面 
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创建 H5 活 动 营 销 页 面 


在 H5 的 制作 过 程 中 ， 除 了 要 对 内 容 进行 优化 外 ， 活 动 也 是 必 不 可 少 的 一 环 ， 活 动 是 H5 吸 引用 户 
的 有 力 形 式 ， 可 以 最 大 限度 地 引爆 H5 页 面 的 热度 ， 提 升 粉丝 的 和 性 。H5 活 动 营 销 的 类 别 众 多 ， 例 如 答 
题 、 问 卷 调查 、 抽 奖 、 微 信 红 包 、VR 全 景 等 。 

接 下 来 以 人 人 秀 为 例 ， 详 细 介 绍 创建 H5 活 动 营销 页 面 的 操作 方法 。 


5.1.1 舍 题 活动 的 H5 页 面 


答题 活动 是 企业 推广 的 一 种 特殊 方式 ， 通 过 答题 赢 好 礼 的 活动 ， 在 页 面 中 植 入 广 
告 ， 使 用 户 在 参与 答题 的 过 程 中 ， 也 能 够 了 解 所 推广 的 信息 。 其 操作 步骤 如 下 。 
9 STEP 01 打开 人 人 秀 编 辑 器 ， 更 换 好 背景 。@ 单 击 “ 互 动 ” 按 钮 ， 展开 其 操作 面板 ; 
四 选择 “活动 ”类 目 中 的 “答题 ” 揪 件 ， 如 图 $-1 所 示 。 
9 STEP 02 执行 操作 后 ， 即 可 导入 答题 插件 ， 单 击 右 侧 的 “设置 ”按钮 ， 如 图 $-2 所 示 。 


be dd 


答题 插件 编辑 区 域 


答题 插件 编辑 区 域 所 
点 击 预览 开始 答题 性 
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图 $-1 选择 “答题 ”插件 图 5-2 单 击 “ 设 置 ”按钮 

9 STEP 03 在 弹出 的 “设置 ”面板 的 “基本 设置 ”选项 卡 中 ， 设 置 “ 活 动 名 称 ” 为 “ 猜 灯 谜 赢 大 奖 ”， 
单 击 “ 开 始 时 间 ” 和 “结束 时 间 ” 右 侧 的 文本 框 ， 可 以 设置 投票 活动 的 起 止 时 间 ， 如 图 $-3 所 示 ， 设 置 
好 活动 时 间 后 ， 如 果 用 户 不 在 此 时 间 范 围 内 浏览 H5， 是 无 法 参与 活动 的 。 

9 STEP 04 在 “活动 规则 ”下 拉 列 表 框 中 ， 可 以 选择 “不 显示 ”或 “ 弹 框 显示 ”两 种 选项 ，@ 这 里 选择 
“ 弹 框 显示 ”; 人 @ 在 下 方 新 增 的 “规则 内 容 ” 文 本 框 中 输入 所 需 的 活动 规则 ， 如 图 5-4 所 示 。 

9 STEP 05 @ 选 中 “ 自 定义 分 享 ” 复 选 框 ， 合并 在 下 方 新 增 的 “分 享 标题 ”文本 框 中 可 以 输入 所 需 的 标 
题 内 容 ， 这 里 我 们 选择 默认 标题 ， 如 图 5-5 所 示 。 

9 STEP 06 候选 中 “关注 我 们 ” 复 选 框 ， 在 下 方 展开 的 “公众 号 ”选项 中 ; 全 单 击 “更 改 ” 按 钮 ， 在 
弹出 的 面板 中 ， 可 以 上 传 企 业 的 公众 号 二 维 码 ， 在 这 里 我 们 选择 默认 的 图 片 库 中 的 一 张 图 片 ， 如 
图 5-6 所 示 。 
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若 天 50 分 上 的 用 疡 到 可 过 S 抽 闫 
话 动 时 间 为 2019 年 2 月 19 日 


图 $-3 ”设置 活动 名 称 及 时 间 
到 


1 狠 杂 洲 喜 大 实 
2019-02-19 00:00;45 
开始 时 间 2019-02-19 00:00:46 本 。 2019-02-19 23:59:59 


司 | 2019-02-19 23:59:59 


be 问 凡 2019 年 2 月 19 日 
自 定 文 分 序 “好 


分 享 标 里 ago 上 得 了 # 分 数 # 分 ， 快 床 拢 眠 荡 


关注 我 们 ”局 


图 5-5 设置 自 定 义 分 享 图 5-6 更 改 设置 二 维 码 
9 STEP 07 切换 至 “题目 ”选项 卡 ， 单 击 “ 题 库 ” 按 钮 ， 在 弹出 的 面板 中 ， 根 据 分 类 ( 例如 知识 问答 、 
在 线 测评 以 及 趣味 测试 ) 选取 所 需 的 题目 ， 单 击 “元 宵 节 灯谜 ” 右 侧 的 “选择 ”按钮 ， 如 图 5-7 所 示 。 
9 STEP 08 执行 操作 后 ， 即 可 导入 元 宵 节 灯 谜 题库 ， 如 图 $-8 所 示 。 


【a ) ( i 答 】 【在 浅 册 是 ]】 【本 昧 出 话 ) 
二 公共 题库 秩 人 三 库 
全 部 ” 符 示 。” 移 叶 专科 襄 误 享 符 
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i 庆 癌 /多 10%% 一 py 
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一 、 伊 人 ( 打 一 字 ) 
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| 知识 问答 ] [520 是 | 百科 完 知 3 、 什 么 花 直 着 开 ? 


六 认同 答 ] 20 和 3] 守信 fa 、 式 人 式 鲜 生 民 航 { 打 一 言 代 名 人 名 宁 
(知识 问答 ] [100 虹 | 好 和 从 任 由 行 任 由 行 任 由 行 


、 泳 全 融化 ( 打 一 城市 名 ) 
| 知识 同 签 ] 27 姑 交通 知识 

元 日 元 宫 沪 光源 全 (7 一 这 滨 ” 侣 闻 才 答 1 
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图 5-7 选择 题库 图 5-8 ”导入 题库 
9 STEP 09 @ 切 换 至 “答题 结果 ”选项 卡 ， 人 @ 在 此 可 以 设置 答题 结果 、 抽 奖 条 件 、 抽 奖 次 数 以 及 奖品 设 
， 用 户 可 以 根据 所 需要 的 设置 进行 更 改 ， 如 图 5-9 所 示 。 
9 STEP 10 人 @ 切 换 至 “排行 榜 ” 选 项 卡 ，@ 选 中 “全 国 排行 榜 ” 复 选 框 ， 在 展开 的 选项 中 还 可 以 选中 
“好 友 排 行 榜 ”或 “排行 榜 奖品 ” 复 选 框 ， 合 在 下 方 用 户 可 以 根据 需要 设置 相关 的 奖品 名 称 等 选项 ， 
如 图 5-10 所 示 。 
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图 5-9 设置 答题 结果 图 5-10 设置 排行 榜 
9 STEP 11 人 @ 切 换 至 “ 领 奖 设置 ”选项 卡 ， 在 此 可 以 设置 添加 用 户 抽 奖 之 后 的 领 奖 信息 ， 全 这 里 默认 选中 
“姓名 ”和 “手机 ” 复 选 框 ， 用 户 可 以 根据 所 需 选 中 信息 复 选 框 即 可 ， 如 图 5-11 所 示 。 
9 STEP 12 人 @ 切 换 至 “样式 ”选项 卡 ， 其 中 提供 了 “标准 ”“ 卡 通 ” 两 套 模板 样式 ;全 这 里 选择 “ 卡 
通 ” 模 板 ， 用 户 也 可 以 根据 需求 对 页 面 风格 、 样 式 、 图 标 以 及 音效 等 进行 修改 ， 如 图 $-12 所 示 。 
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wa 
图 5-11 领 奖 设置 图 5-12 样式 设置 
9 STEP 13 设置 完成 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 答题 插件 的 设置 。 在 制作 页 面 中 ， 单 击 页 面 右 上 
角 的 “预览 ”按钮 ， 进 入 预览 界面 ， | 也 可 以 通过 手机 微 信 端 扫描 二 维 码 预 
览 。 图 5-13 所 示 为 答题 活动 H5 手 机 移动 端 预 览 界 面 。 


图 5-13 ”预览 答题 活动 


问卷 调 但 活动 的 H5 页 面 


产品 的 销量 取决 于 大 众 ， 所 以 一 般 企 业 在 发 布 新 产品 前 都 会 选择 进行 问卷 调查 ， 
了 解 新 产品 是 否 会 受 大 众 欢迎 。 其 操作 步骤 如 下 : 
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e STEP 02 执行 


9 STEP 01 打开 人 人 秀 编辑 器 ， 更 换 好 背景 ; 人 @ 单 击 “ 互 动 ” 按 钮 展开 其 操作 面板 ; 四 选择 “活动 ”类 
目 中 的 “问卷 调查 ”插件 ， 如 图 5-14 所 示 。 
操作 后 ， 即 可 插入 


“问卷 调查 ”插件 ， 单 击 右 侧 的 “设置 ”按钮 ， 如 图 5-15 所 示 。 
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高 妆 机 械 手 表 你 最 中 意 谁 ? 
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图 $-14 选择 “问卷 调查 ”插件 


图 5-15 插入 “问卷 调查 ”插件 
9 STEP 03 弹出 相应 面板 ， 在 “基本 设置 ”选项 卡 中 ， 设 置 “ 活 动 名 称 ” 为 “手表 问卷 调查 ”， 单 击 
“开始 时 间 ” 和 “结束 时 间 ” 右 侧 的 文本 框 ， 可 以 设置 问卷 调查 的 起 止 时 间 ， 如 图 $-16 所 示 。 
9 STEP 04 单 击 “投票 选项 ” 右 侧 的 “设置 ”按钮 ， 在 弹出 的 “选项 设置 ”面板 中 添加 相应 选项 ， 如 
图 5-17 所 示 。 


1 活动 各 称 手表 问卷 调 喜 
1 


开始 时 间 2018-04-20 00:00 


1 
1 结 率 时 间 | 2018-04-20 23:59| 
1 


图 5-16 设置 活动 名 称 及 事件 图 5-17 选项 设置 
9 STEP 05 单 击 “保存 ”按钮 ， 即 可 添加 相应 选项 ， 效 果 如 图 5-18 所 示 。 


9 STEP 06 单 击 右 侧 的 “设置 ”按钮 ， 在 弹出 的 面板 中 ，@ 切 换 至 “投票 设置 ”选项 卡 ; 四 在 


“最 多 选 
择 ” 选 项 中 可 以 设置 用 户 最 多 选中 几 个 选项 ， 输 入 相对 应 的 数字 即 可 ， 如 图 $-19 所 示 。 
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投票 后 触发 功能 
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图 5-18 添加 相应 选项 


图 $-19 ”投票 设置 
9 STEP 07 在 “投票 后 触发 功能 ”下 拉 列 表 框 中 ， 可 以 选择 “无 ”“ 跳 转 到 页 面 ”“ 打 开 弹 框 页 面 ”3 
种 选项 ， 在 这 里 选择 “无 ”选项 ， 如 图 $-20 所 示 。 
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9 STEP 08 人 @ 切 换 至 “样式 设置 ”选项 卡 ， 合 在 “按钮 文字 ” 右 侧 输入 文本 “投票 ”; 四 单 击 “风格 颜 
色 ” 右 侧 的 色 块 ， 展 开颜 色 拾取 器 ， 人 选择 红 色色 块 ， 如 图 5-21 所 示 。 


投 梭 缚 果 不 可 见 


获 弄 禾 信 信息 


录入 个 人 信息 


图 $-20 设置 “投票 后 触发 功能 ”选项 图 $-21 设置 按钮 文字 及 颜色 
9 STEP 09 设置 完成 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 问卷 调查 插件 的 设置 。 在 制作 页 面 中 ， 单 击 页 面 
右上 角 的 “预览 ”按钮 ， 进 入 预览 界面 ， 即 可 预览 问卷 调查 活动 H5 页 面 。 图 5-22 所 示 为 问卷 调查 活动 
H5 手 机 移动 端 预览 界面 。 
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图 5-22 ”预览 问卷 调查 活动 


5.1.3 ”短信 红包 活动 的 H5 页 面 
微 信 红包 活动 是 企业 推广 涨 粉 增 粉 的 一 种 营销 利器 ， 通 过 发 放 红包 ， 在 用 户 关注 
企业 领取 红包 后 ， 推 送 相关 活动 广告 ， 达 到 营销 目的 。 其 操作 步骤 如 下 。 
e STEP 01 打开 人 人 秀 编辑 器 ， 更 换 好 背景 ，@ 单 击 “ 互 动 ”按钮 展开 其 操作 面板 ， 
@ 选 择 “ 活 动 ”类 目 中 的 “ 微 信 红 包 ” 插 件 ， 如 图 5-23 所 示 。 
e STEP 02 执行 操作 后 ， 即 可 插入 “ 微 信 红包 ”插件 ， 单 击 右 侧 的 “红包 设置 ”按钮 ， 如 图 5-24 所 示 。 


图 5-23 ”选择 “ 微 信 红包 ”插件 图 5-24 插入“ 微 信 红包 ”插件 
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9 STEP 03 弹出 相应 面板 ， 在 “基本 设置 ”选项 卡 中 ，@ 单 击 “ 活 动 时 间 ” 右 侧 的 文本 框 ， 人 可 以 设置 
微 信和 红包 的 起 止 时 间 ， 如 图 5-25 所 示 。 
9 STEP 04 在 其 他 选项 中 ， 可 以 设置 红包 总 金额 、 单 个 红包 最 高 最 低 金 额 以 及 中 奖 率 ， 如 图 5-26 所 示 。 


( 单 次 会 锋 不 能 佐 于 10 元 ] 
账户 制作 红包 ; 0 元 红包 而 互 


= (和 恒 低 1 元 ， 量 况 200 元 ) 
( 中 其 率 最 恬 20% ， 最 高 9996 ) | 
习 是 再 光 洗 午 揽 泡 并 包 ( 针对 洽 到 0 元 用 户 ) 


时 | 是 否 显 示 红 包 状 专 中 是 否 显 示 红 包 杖 过 


图 5-25 设置 “活动 时 间 ” 图 5-26 设置 其 他 选项 
9 STEP 05 切换 至 “高 级 设置 ”选项 卡 ， 可 以 设置 位 置 限制 、 分 享 后 获得 额外 一 次 抽奖 机 会 、 时 段 红 
包 、 红 包 弹 幕 、 公 众 号 关注 后 领 红包 等 多 种 选项 ， 但 因为 平 侣 限制， 用户 需 将 账户 升级 至 企业 标准 版 
或 以 上 版 本 方 能 使 用 ， 如 图 5-27 所 示 。 
9 STEP 06 人 @ 切 换 至 “信息 设置 ”选项 卡 ; 全 设置 “活动 名 称 ” 为 微 信 红包 、“ 公 司 名 称 ”为 “ 李 
于 ”、“ 活 动 祝福 ”为 “ 茶 喜 发 财 ， 大 吉大 利 ”、“ 活 动 备 注 ” 为 “ 微 信 红包 ”， 如 图 5-28 所 示 。 
升级 提示 \ 


权限 不 足 ， 请 升级 到 『 企 业 标准 版 」 或 以 上 版 本 。 


图 5-27 高 级 设置 图 5-28 ”信息 设置 
9 STEP 07 全 切换 至 “样式 设置 ”选项 卡 ; 人 外 可 以 修改 恢复 红包 按钮 以 及 各 种 提示 信息 弹 窗 样式 ， 如 图 


5-29 所 示 。 
9 STEP 08 设置 完成 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 微 信 红 包 插 件 的 设置 。 在 制作 页 面 中 ， 单 击 页 面 
右上 角 的 “预览 ”按钮 ， 进 入 预览 界面 ， 如 图 5$-30 所 示 。 


图 $-29 ”样式 设置 图 5-30 进入 “预览 ”界面 
@ STEP 09 通过 微 信 扫描 预览 界面 中 的 二 维 码 ， 即 可 在 手机 端 查看 制作 的 微 信 红 包 活 动 H5 界 面 ， 效 果 如 


图 5-31 所 示 。 
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图 5-31 ” 微 信 红包 活动 HS$ 手 机 移动 端 预览 界面 


9.1.4 ”VR 全 景 的 H5 页 面 


VR 全 景 是 3D 和 虚拟 现实 技术 结合 生成 的 一 种 方式 ， 可 以 360 度 全 方位 地 展示 场 “中 富国 

景 ， 大 多 用 于 企业 展现 场景 ， 现 在 结合 应 用 于 H5 页 面 中 ， 可 以 方便 快捷 地 展示 企业 场 1 了 个 

口 | b= 可 

景 。 其 操作 步骤 如 下 。 扫 码 看 视频 

e STEP 01 打开 人 人 秀 编辑 器 ， 人 @ 单 击 “互动 ”按钮 展开 其 操作 面板 ， 人 全 选择 “活动 ”类 目 中 的 “VR 
景 图 ”插件 ， 如 图 5-32 所 示 。 

e STEP 02 执行 操作 后 ， 即 可 插入 “VR 全 景 图 ”插件 ， 单 击 右 侧 


的 “VR 全 景 图 设置 ”按钮 ， 如 图 5-33 所 示 。 


图 5-32 ”选择 “VR 人 全景” 插件 图 5-33 ”插入 “VR 人 全景” 插件 
9 STEP 03 弹出 相应 面板 ， 在 “全 景 设置 ” 选 项 卡 中 ， 单 击 十 按钮 ， 如 图 5-34 所 示 ， 可 以 添加 全 景 图 片 。 
9 STEP 04 人 @@ 切 换 至 “高 级 设置 ”选项 卡 ; 全 可 以 选中 “支持 VR 模式 ”和 “小 行星 开场 ” 复 选 框 ， 如 
图 5-35 所 示 。 


图 5-34 添加 “VR 全 景 图 片 ” 图 5-35 高 级 设置 
9 STEP 05 设置 完成 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 VR 全 景 插件 的 设置 。 在 制作 页 面 中 ， 单 击 页 面 


右上 角 的 “ 预 筑 ”按钮 ， 进 入 预览 界面 ， 即 可 预览 VR 全 景 H5 页 面 。 
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5.1.52 “一 镜 到 搬 的 HD2 页 面 


一 镜 到 底 的 概念 一 开始 形成 于 电影 或 纪录 片 的 一 种 拍摄 方式 ， 意 指 为 镜头 不 cut， 
后 由 于 HS 的 盛行 ， 一 镜 到 底 也 被 引用 到 H5 页 面 中 作为 一 种 特有 的 交互 切换 方式 。 其 操 加 Er 
作 步 又 如 下 。 扫 码 看 视 频 
9 STEP 01 打开 人 人 秀 编辑 器 ，@ 单 击 “ 互 动 ” 按 钮 展开 其 操作 面板 ， 人 @ 选 择 “ 趣 味 ” 类 目 中 的 “一 镜 
到 底 ” 插 件 ， 如 图 5-36 所 示 。 
9 STEP 02 执行 操作 后 ， 即 可 导入 “一 镜 到 底 ” 插 件 ，@ 单 击 “ 一 镜 到 底 ” 预 览 栏 左下 角 的 “添加 页 
面 ”按钮 ， 可 以 增加 新 的 一 镜 到 底 页 面 ， 并 将 事先 准备 好 的 素材 ; 人 依次 插入 到 一 镜 到 
底 页 面 中 ， 如 图 $-37 所 示 。 


a 作 2 加 | :一 
i@ :O0101O:O! 
2 区 H nu 2 
b 本 时 ae 
了 


图 $-36 ”选择 “一 镜 到 底 ” 插 件 图 5-37 添加 素材 
eo STEP 03 @ 单 击 “ 一 镜 到 底 ” 预 览 栏 右 侧 的 “设置 ”按钮 ， 人 @ 在 弹出 的 “设置 ”对 话 杠 中 设置 “页 面 
间距 ”为 600， 营 造 空间 感 ， 


图 $-38 设置 “页 面 间 距 ” 
9 STEP 04 在 人 人 秀 的 “模板 商店 ”中 提供 了 很 多 精美 的 “一 镜 到 底 ” 模 板 ， 可 以 让 我 们 快速 、 省 力 地 
制作 “一 镜 到 底 ”H5 作 品 。 在 页 面 中 选取 “重阳 节 一 镜 到 底 ” 模 板 ， 效 果 如 图 5-39 所 示 。 


图 5-39 ”使 用 模板 制作 “一 镜 到 底 ” 的 HS 作品 
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5.1.6 快 内 活动 的 H2 页 面 


快 闪 是 一 种 新 型 的 行为 方式 ， 也 指 一 种 短暂 的 行为 艺术 ， 在 H5 页 面 中 主要 表现 在 
页 面 间 快 速 切换 形成 的 一 种 视觉 效果 。 其 操作 步骤 如 下 。 De: 

e STEP 01 打开 人 人 秀 编辑 器 ， 更 换 好 背景 后 ， 单 击 “ 页 面 ”面板 左下 角 的 “添加 页 扫 码 看 视频 
面 ”按钮 ， 新 增 一 个 空白 页 面 ， 如 图 5-40 所 示 。 

e STEP 02 @ 单 击 “ 互 动 ”按钮 展开 其 操作 面板 ，@ 选 择 “ 趣 味 ” 类 目 中 的 


“ 快 闪 ” 插 件 ， 如 图 5-41 所 示 。 


情 
引 - 


图 5-40 ”更换 背景 并 新 增 页 面 图 5-41 选择 “ 快 闪 ”插件 
9 STEP 03 执行 操作 后 ， 即 可 导入 “ 快 内 ”插件 ，@ 单 击 “ 快 闪 ” 预 览 栏 左下 角 的 “添加 页 面 ”按钮 ， 可 以 
增加 新 的 快 内 页 面 ， 并 将 事先 准备 好 的 素材 ，@ 按 照 出 现 顺 序 依 次 插入 到 快 内 的 页 面 中 ， 如 图 5-42 所 示 。 
9 STEP 04 人 @ 单 击 “ 快 内 ”预览 栏 右 侧 的 “设置 ”按钮 ;全 在 弹出 的 “设置 ”对 话 框 中 设置 “停留 时 


上 间 ” 为 0 ( 设置 为 0， 表 示 页 面 完 成 动画 后 自动 切换 ) ， 如 图 5-43 所 示 。 


图 5-42 ”添加 素材 图 5-43 ”设置 “停留 时 间 ” 
9 STEP 05 在 人 人 秀 的 “模板 商店 ”中 ， 也 提供 了 大 量 的 “ 快 内 ”模板 ， 在 页 面 中 选取 “ 九 月 的 小 编 都 
TM 经 历 了 神 马 ! ! ! ”模板 ， 最 终 如 图 5-44 所 示 。 


预存 模式 ， 仅 供 测 试 


图 5-44 ”使 用 模板 制作 “ 快 闪 ”H5 作 品 
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5.1.7。 砍 价 活动 的 H5 页面 


砍 价 活动 也 是 一 种 增 粉 涨 粉 的 企业 营销 方式 ， 通 过 抓 住 用 户 想 低 价 购买 产品 的 欲 
望 ， 让 其 分 享 活动 ， 进 一 步 扩 大 推广 范围 。 其 操作 步骤 如 下 。 
9 STEP 01 打开 人 人 秀 编辑 器 ，@ 单 击 “ 互 动 ”按钮 展开 其 操作 面板 ， 全 选择“ 活动” 
类 目 中 的 “ 砍 价 ” 插 件 ， 如 图 5-45 所 示 。 
9 STEP 02 执行 操作 后 ， 即 可 导入 “ 砍 价 ” 插 件 ， 单 击 右 侧 的 “ 砍 价 设置 ”按钮 ， 如 图 5-46 所 示 。 
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图 5-45 ”选择 “ 砍 价 ”插件 图 5-46 导入 “ 砍 价 ”插件 

9 STEP 03 在 “基本 设置 ”选项 卡 中 ， 人 @ 设 置 “ 活 动 名 称 ” 为 “疯狂 大 砍 价 ”; 全 单 击 “活动 时 间 ” 石 
侧 的 文本 框 ， 合 可 以 设置 砍 价 活动 的 起 止 时 间 ， 如 图 5-47 所 示 。 

9 STEP 04 @@ 在 下 方 设置 “联系 电话 ”以 及 “显示 排行 数 ”; 四 并 选中 “ 自 定 义 分享 ” 复 选 框 ， 合 在 新 
增 的 “分 享 标题 ” 栏 中 输入 分 享 标题 的 内 容 ， 如 图 $-48 所 示 。 


图 5-47 设置 活动 名 称 及 时 间 图 5-48 设置 其 他 选项 

9 STEP 05 切换 至 “内 容 设 置 ”选项 上 不， 在 “内 容 模 板 ” 中 ， 可 以 对 各 模块 进行 顺序 调整 ， 以 及 添加 修 
改 模块 ， 在 这 里 选择 默认 的 设置 ， 如 图 5-49 所 示 。 

9 STEP 06 QO 切换 至 “奖品 设置 ”选项 卡 ， 全 选中 “领取 奖品 次 数 ” 右 侧 的 “ 限 数 ” 单 选 按 钮 ， 合 并 
输入 “1” 次 ;人 @ 在 下 方 的 设置 栏 中 可 以 更 换 奖 品 图 片 ， 以 及 对 “奖品 名 称 ”“ 奖 品类 型 ”“ 奖 品 原 
价 ”“ 奖 品 底 价 ”“ 奖 品 数 量 ” 进 行 相 关 设 置 ， 如 图 5-50 所 示 。 

9 STEP 07 @Q 切 换 至 “ 领 奖 设置 ”选项 卡 ， 人 选中 需要 的 信息 复 选 框 ， 即 可 在 用 户 砍 价 完成 后 ， 输 入 所 
对 应 的 信息 才 可 以 进行 领 奖 ， 如 图 5-51 所 示 。 

9 STEP 08 人 @ 切 换 至 “样式 设置 ”选项 卡 ; 人 其 中 提供 了 “默认 ”以 及 “插画 ”两 种 模板 可 供 选 择 ， 用 户 
也 可 以 根据 自身 需求 对 “ 弹 框 风格 ”“ 文 字 风 格 ” 以 及 各 种 按钮 样式 进行 修改 设置 ， 如 图 5-52 所 示 。 
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eSTEP 09 设置 完成 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 砍 价 插件 的 设置 。 单 击 制作 页 面 中 右上 和 角 
的 “预览 ”按钮 ， 进 入 预览 界面 ， 通 过 微 信 扫 描 二 维 码 ， 在 手机 端 预览 制作 的 HS 界面 效果 ， 如 
图 5-53 所 示 。 


图 5-49 内容 设置 


活动 规则 : 选择 你 要 参加 的 奖品 砍 价 ， 在 规定 的 
时间 附 完成 次 价 的 副 可 以 以 最 低 的 价格 获得 你 的 
奖品 了 


图 $-$S2 ”样式 设置 图 $-$3 ”下 价 活动 预览 界面 


创建 H5 趣 味 营销 页 面 


优秀 的 H5 营 销 案 例 ， 通 背 都 是 具有 一 定 亮点 的 ， 如 精致 的 创意 策划 、 精 美的 视觉 设计 、 精 彩 的 互 
动 体验 等 ， 可 以 让 用 户 快速 联想 到 具体 的 情景 。 因 此 ， 很 多 H5 营 销 都 开始 借鉴 各 种 模拟 手机 或 微 信 的 
趣味 营销 方式 ， 来 让 H5 快 速 刷 爆 朋友 圈 。 

下 面 以 人 人 秀 为 例 ， 详 细 介绍 创建 H5 趣 味 营销 页 面 的 操作 方法 。 


5D.2.1 互动 游戏 设计 


互动 游戏 H5 主 要 是 为 H5 页 面 添加 趣味 小 游戏 ， 使 用 户 的 注意 力 集中 在 页 面 中 ， 
在 参与 游戏 互动 的 同时 ， 又 能 够 使 用 户 了 解 企 业 所 要 推广 的 信息 。 其 操作 步骤 如 下 。 
eo STEP 01 打开 人 人 秀 编辑 器 ，@@ 单 击 “ 互 动 ” 按钮 展开 其 操作 面板 ; 四 选择 “游戏 ” 扫 码 看 视 频 
类 目 中 的 “ 寻 碑 谷 2” ， 如 图 $-54 所 示 。 
9 STEP 02 执行 操作 后 ， 即 可 导入 “ 寻 碑 谷 2” 插 件 ， 单 击 右 侧 的 “游戏 设置 ”按钮 ， 如 图 $-55 所 示 。 
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图 5-54 选择 “ 寻 碑 谷 2” 插 件 图 5-55 单 击 “游戏 设置 ”按钮 
e STEP 03 在 弹出 “游戏 设置 ”面板 中 ， 切 换 至 所 需 的 选项 卡 ， 对 所 需 选 项 进行 设置 与 更 改 ， 如 图 $-S6 


所 示 。 

9 STEP 04 设置 完成 后 ， 单 击 “ 人 保存” 按钮 ， 即 可 完成 寻 碑 谷 2 插件 的 制作 。 单 击 制作 页 面 右上 角 的 
“预览 ”按钮 ， 进 入 预览 界面 ， 通 过 微 信 扫描 二 维 码 ， 在 手机 端 预览 制作 的 H5 界 面 效 果 ， 如 图 5-57 

所 示 。 


活动 时 间 | 2018-04-22 00:00 -~ 2018-04-22 23:59 


地 域 限 提 。 设 圈 


震动 规则 缔 三 哆 示 


刚 内 于 ”左右 沪 制 小 人 ， 使 其 跳 的 页 运 


图 5-56 ”游戏 设置 图 5-57 砍 价 活动 手机 移动 端 预 览 界面 


[专家 指点 Re , 由 于 人 人 秀 HS 平台 提供 了 大 量 的 游戏 插件 ， 所 以 用 户 在 设计 互动 游戏 HS 页 面 
一 时 ， 只 需 在 制作 页 面 中 ， 选 取 并 导入 所 需要 的 游戏 主题 插件 ， 对 插件 的 游戏 参数 及 
re eh 


D.2.2 人 短信 场景 模拟 


微 信 和 群 聊 场景 的 模拟 ， 可 以 使 用 户 在 打开 推广 页 面 时 ， 通 过 一 些 趣味 的 聊天 方 

式 ， 将 广告 语 结合 起 来 ， 让 用 户 在 观看 群 员 “ 聊 天 ”中 了 解 到 广告 内 容 。 其 操作 步骤 国 性 尖 
如 下 。 扫 码 看 视频 
9 STEP 01 打开 人 人 秀 编 辑 器 ， 人 @ 单 击 “ 互 动 ” 按 钮 展开 其 操作 面板 ， 全 选择 “趣味 ”类 目 中 的 “ 微 信 


群 聊 ”， 如 图 5-58 所 示 。 
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图 5-58 选择“ 微 信和 群 聊 ” 插 件 图 5-59 单 击 “消息 设置 ”按钮 
9 STEP 03 弹出 相应 面板 ， 在 “基本 设置 ”选项 卡 中 ， 选 择 “ 模 板 列 表 ” 中 的 “三 生 三 世 ”， 如 图 5-60 
所 示 。 
9 STEP 04 人 @ 切 换 至 “样式 设置 ”选项 卡 ; 四 设置 “和 群 聊 主 题 ” 为 “十 里 桃花 ”、 “显示 昵称” 为“ 显 
示 ”、 “自动 翻 页 ”为 “人 允许 ”、“ 消 息 间隔 ”为 1.2 秒 ， 如 图 $-61 所 示 。 
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叹 叹 肥 ， 远 个 符 三 计划 千 礼 的 ， 
这 四 诲 八 款 盏 紊 HS 二 这 全 侈 3 
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等 孔 一 统 庆 四 海 八 琉 ， 蔬 用 人 人 3 
秀 发 布 六 证 函 ， 东 呈 入 8 万 包 年 ”区 
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图 5-60 基本 设置 图 5-61 样式 设置 
9 STEP 05 设置 完成 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 微 信 和 群 聊 插 件 设 置 。 在 制作 页 面 中 ， 单 击 右 上 和 角 
的 “预览 ”按钮 ， 进 入 预览 界面 ， 通 过 微 信 扫 摘 二 维 码 ， 在 手机 端 预览 制作 的 HS 界面 效果 ， 如 图 $-62 
所 示 。 


预览 模式 ， 仅 供 测试 预览 模式 ， 仅 供 测试 
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是 当年 父 神 介绍 的 
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Pe" 大 家 都 知道 了 吧 ， 我 和 浅 浅 的 


婚礼 就 快 所 上 日 程 了 ! ! 


总 ”小 天 孙 阿 离 
娘 亲 ， 娘 亲 ， 人 人 秀 好 啊 ， 里 
面 还 有 小 游戏 玩 呢 ， 阿 高 要 
玩 . 


青 丘 女 党 - 白 浅 

夜 华 ， 嗓 然 阿 两 豆 欢 就 用 地 
吧 ， 我 刚 刷 了 微 信 ， 朋 友 圈 好 
多 人 在 用 呢 


未 来 天 妊 - 夜 华 


好 ， 都 依 你 ， 我 去 开通 个 企业 
高 级 版 什么 的 


图 $-62 ” 微 信 场景 模拟 HS 手机 移动 端 预览 界面 


第 5 章 ”H5 的 创意 内 容 i 


5.2.3 来电 界面 模拟 


来 电 界面 模拟 是 通过 一 种 交互 方式 ， 以 接听 电话 的 形式 ， 进 入 广告 推广 的 页 面 ， 
产生 一 种 实时 的 趣味 交互 。 其 操作 步骤 如 下 。 回 3 
9 STEP 01 打开 人 人 秀 编 辑 器 ，@ 单 击 “ 互 动 ” 按 钮 展开 其 操作 面板 ， 人 选择“ 趣味” 扫 码 看 视频 
类 目 中 的 “语音 来 电 ” 插 件 ， 如 图 5-63 所 示 。 
e STEP 02 执行 操作 后 ， 即 可 导入 “语音 来 电 ” 插 件 ， 如 图 5-64 所 示 。 


图 5-63 选 树 “语音 米 电 ”插件 图 5-64 导入 “语音 来 电 ” 插 件 
e STEP 03 在 右 侧 的 “语音 来 电 ” 面 板 中 ， 引 设置 “名 称 ” 为 “小 六 ”; 四 单 击 “头像 ” 右 侧 的 “ 
换 ” 按 钮 ， 更 换 所 需 头像 ， 如 图 5-65 所 示 。 
©e STEP 04 设置 完成 后 ， 人 在 制作 页 面 中 ， 单 击 右 上 角 的 “ 预 移 ”按钮 ， 
进入 预览 界面 ， 通 过 微 信 扫 描 二 维 码 ， 在 手机 端 预览 制作 的 H5 界 面 效果 ， 如 图 5-66 所 示 。 


图 5-65 设置 “语音 来 电 ” 图 5-66 来 电 界 面 模 拟 H5 手 机 移动 端 预览 界面 


5D.2.4 通知 界面 模拟 


锁 屏 通知 界面 的 模拟 ， 是 将 页 面 设计 成 锁 屏 时 的 信息 通知 ， 用 户 在 单 击 信息 查 看 
时 ， 页 面 跳 转 到 广告 界面 ， 从 而 达到 推广 目的 。 其 操作 步骤 如 下 。 向 上 
e STEP 01 打开 人 人 秀 编辑 器 ， 人 @ 单 击 “ 互 动 ”按钮 展开 其 操作 面板 ; 四 选择 “趣味 ” 扫 码 看 视频 
类 目 中 的 “ 锁 屏 通知 ”， 如 图 5$-67 所 示 。 
9 STEP 02 执行 操作 后 ， 即 可 导入 “ 锁 屏 通知 ”插件 ， 单 击 右 侧 的 “消息 设置 ”按钮 ， 如 图 $-68 所 示 。 
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图 5-67 选择 “ 锁 屏 通知 ”插件 图 5-68 单 击 “消息 设置 ”按钮 
9 STEP 03 弹出 相应 面板 ， 在 “基本 设置 ”选项 卡 中 ， 选 择 “ 模 板 列 表 ” 中 的 “开启 聊天 ”选项 ， 如 


图 5-69 所 示 。 
e STEP 04 各 切换 至 “样式 设置 ”选项 卡 ; 全 设置 “消息 主题 ”为 “短信 ”， 如 图 5-70 所 示 。 


图 5-69 基本 设置 图 5-70 样式 设置 
9 STEP 05 设置 完成 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 锁 屏 通知 插件 设置 。 在 制作 页 面 中 ， 单 击 右 上 和 角 
的 “预览 ”按钮 ， 进 入 预览 界面 ， 通 过 微 信 扫描 二 维 码 ， 在 手机 端 预览 制作 的 H5 界 面 效果 ， 如 图 $-71 


所 示 。 


上 一 页 短信 入 一 河 兰 主机 上 去 有 艾 早 


图 5-71 预览 界面 及 手机 移动 端 预览 H5 界 面 


产品 推广 的 诞生 源 于 市 场 的 推动 ， 随 着 市 场 的 不 断 扩 张 ， 以 及 品牌 的 竞 
争 对 手 增多 ， 早 期 纸 质 的 广告 推广 力度 早已 不 够 ， 而 需要 借助 一 定 的 平台 及 
资源 为 产品 进行 推广 。 本 章 主 要 介绍 常见 HS 推广 广告 设计 。 
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新 品 上 市 : 掌握 新 品 发 布 的 H5 页 面 设计 


随 肴 新 品 的 上 市 ， 举 办 新 品 发 布 会 便 是 一 种 最 重要 的 产品 推广 手段 。 对 企业 来 说 ， 新 品 发 布 页 面 
的 设计 是 商界 非常 重视 的 一 个 环节 ， 关 系 着 未 来 自身 产品 的 影响 及 销售 。 
本 实例 最 终 效果 如 图 6-1 所 示 。 


图 6-1 实例 效果 


效果 \ 第 6 章 \ 掌 握 新 品 发 布 H5 页 面 设计 .psd、 掌 握 新 品 发 布 H5 页 面 设计 .jpg 


6.1.1 设计 新 品 发 布 痛 景 形状 效果 


新 品 发 布 会 的 主题 是 新 产品 的 上 市 ， 制 作 H5 界 面 便 要 突出 主题 ， 背 景 形 状 的 设计 
要 与 之 相符 ， 不 能 反差 过 大 。 下 面 详细 介绍 设计 新 品 发 布 背景 形状 效果 的 方法 。 其 操 
作 步 又 如 下 。 

9 STEP 01 选择 “文件 ” |“ 新 建 ”命令 ， 弹 出 “新 建 ” 文 档 对 话 框 ，@@ 设 置 “名 称 ” 为 “掌握 新 品 发 布 会 
H5 页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 像 素 /英寸 、“ 颜 色 模 式 ” 
为 “RGB 颜 色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 6-2 所 示 ; 人 @ 单 击 “创建 ” 按 钮 ， 新 建 一 个 空白 图 像 。 
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9 STEP 02 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ，@@ 在 渐变 条 上 设置 青色 到 淡 青 色 的 
渐变 ( RGB 参数 值 分 别 为 9$、235、205; 206、255、253 ) ; 四 单 击 “新 建 ” 按 钮 ， 新 建 渐变 预 设 ， 如 
图 6-3 所 示 。 

9 STEP 03 展开 “图 层 ” 面 板 ， 在 面板 下 方 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “和 珑 形 1” 图 层 ， 并 选 
取 工 具 箱 中 的 矩形 选 框 工 具 ， 在 图 像 编辑 窗口 中 绘制 一 个 矩形 选区 ， 效 果 如 图 6-4 所 示 。 

9 STEP 04 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 选 择 新 建 的 青色 到 淡 青 色 的 渐变 预 
设 ， 并 单 击 工具 属性 栏 中 的 “线性 渐变 ”按钮 ， 在 和 窍 形 选区 内 从 左 至 右 填充 渐变 ， 然 后 按 Ctrl 十 D 组 合 
键 取消 选区 ， 效 果 如 图 6-5 所 示 。 
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图 6-3 新建 渐变 预 设 图 6-4 绘制 矩形 选区 图 6-5 填充 线性 渐变 
9 STEP 05 选取 工具 箱 中 的 和 窍 形 工具 ， 和 全 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ” 
为 新 建 的 青色 到 淡 青 色 的 渐变 预 设 ; 四 设置 “指定 渐变 样式 ”为 “线性 渐变 ”; 四 设置 “旋转 渐变 
为 90、“ 描 边 ” 为 无 ， 如 图 6-6 所 示 。 
9 STEP 06 在 图 像 编辑 窗口 中 ， 绘 制 一 个 矩形 ， 并 按 Enter 键 确认 绘制 ， 得 到 “和 珑 形 2” 图 层 ， 效 果 如 


图 6-7 所 示 。 
9 STEP 07 选取 工具 箱 中 的 直接 选择 工具 ， 在 “ 珑 形 2” 图 像 左上 角 锁 点 处 单 击 鼠 标 左 键 ， 选 中 锁 点 ， 


如 图 6-8 所 示 。 
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图 6-6 设置 选项 图 6-7 绘制 矩形 图 6-8 选中 锚 点 
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9 STEP 08 按 Delete 键 删除 销 点 ， 并 按 Enter 键 确认 删除 ， 效 果 如 图 6-9 所 示 。 
9 STEP 09 选择 “和 矩 形 2” 图 层 ， 按 Ctrl 十 丁 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 大 小 及 位 置 ， 效 果 


如 图 6-10 所 示 。 


9 STEP 10 按 Enter 键 确认 变换 ， 效 果 如 图 6-11 所 示 。 
图 6-9 ”删除 锚 点 图 6-10 调整 图 像 图 6-11 ”确认 变换 


在 Photoshop CC 2018 工 作 界 面 中 ， 变 换 图 像 是 非常 有 效 的 图 像 编 辑 手段 ， 用 : 
ea en 调整 缩放 、 斜 切 、 扭 曲 、 透 视 等 操作 。 
E 除了 上 述 操作 外 ， 用 户 还 可 以 运用 “自由 变换 ”命令 ， 斜 切 图 像 制 作 逼真 的 倒影 效果 。 
与 斜 切 不 同 的 是 ， 执 行 扭曲 操作 时 ， 控 制 点 可 以 随意 拖 动 ， 不 受 调整 边框 方向 的 限制 ， 若 在 
: 拖 复 鼠标 的 同时 按 住 Alt 键 ， 则 可 以 制作 出 对 称 扭曲 效果 ， 而 斜 切 则 会 受到 调整 边框 的 限制 。 
. 如 果 需 要 将 平面 图 变换 为 透视 效果 ， 就 可 以 运用 透视 功能 进行 调节 。 选 择 “透视 ”命令 ， 即 
可 显示 变换 控制 框 ， 此 时 单 击 鼠标 左 键 并 拖 动 可 以 进行 透视 变换 。 | 
e STEP 11 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 按 住 鼠 标 左 键 拖 动 “ 矩 形 2” 图 层 ， 复 制 得 到 “和 矩形 
2 拷贝 ”图 层 ， 效 果 如 图 6-12 所 示 。 

e STEP 12 选择 “和 矩 形 2 拷贝 ”图 层 ， 选 择 “ 编 辑 ”|“ 变 换 ”|“ 缩 放 ” 命 令 ， 调 出 变换 控制 框 ， 适 当 
调整 图 像 的 大 小 及 位 置 ， 效 果 如 图 6-13 所 示 。 

9 STEP 13 按 Enter 键 确认 变换 ， 效 果 如 图 6- 


图 6-12 复制 图 像 图 6-13 ”调整 图 像 图 6-14 确认 变换 
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9 STEP 14 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 按 住 鼠 标 左 键 拖 动 “ 和 矩形 2 拷贝 ”图 层 ， 复 制 得 到 
“矩形 2 拷贝 2” 图 层 ， 效 果 如 图 6-15 所 示 。 

e STEP 15 选择 “矩形 2 拷贝 2” 图 层 ， 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适当 调整 图 像 大 小 及 位 
置 ， 效 果 如 图 6-16 所 示 。 

9 STEP 16 按 Enter 键 确认 变换 ， 效 果 如 图 6-17 所 示 。 


| 
中 Ks a 


图 6-15 复制 图 像 图 6-16 调整 图 像 


图 6-17 确认 变换 


设计 新 品 友 布 图 文 信息 效果 


新 品 发 布 会 所 设计 的 内 容 一 定 要 图 文 并 茂 ， 在 展现 新 品 发 布 会 信息 的 同时 ， 也 要 ” 嘻 S 生 中 区 
选择 性 地 突出 要 发 布 的 新 产品 。 下 面 详细 介绍 设计 新 品 发 布 图 文 信息 效果 的 方法 。 其 ”硬是 呈 
操作 步骤 如 下 。 扫 码 看 视频 
9 STEP 01 按 Ctrl 十 0 组合 键 ， 打开“ 模特 .psd” 素 材 图 像 ， 用 移动 工具 拖 忠 到 图 像 编辑 窗口 中 ， 得 到 


“模特 ”图 层 ， 效 果 如 图 6-18 所 示 。 
e STEP 02 选择 “编辑 ”|“ 变 换 ”|“ 缩 放 ” 命 令 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 的 大 小 及 位 置 ， 效 


果 如 图 6-19 所 示 。 
9 STEP 03 按 Enter 键 确认 变换 ， 效 果 如 图 6-20 所 示 。 


图 6-19 调整 图 像 图 6-20 ”确认 变换 


图 6-18 拖 瘟 图像 
e STEP 04 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 
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加 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 13.61 点 、“ 行 距 ” 为 18.74 点 、“ 设 置 所 选 字符 的 字 距 
调整 ”为 0、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参数 值 分 别 为 1、63、116 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 6-21 所 示 。 

9 STEP 05 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-22 所 示 。 

9 STEP 06 在 “字符 ”面板 中 ， 各 设置 “字体 系列 ”为 “方正 综艺 简体 ”、 “字体 大 小 ”为 11.91 点 、 
“行距 ”为 24.15 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参数 值 分 别 为 1、 
63、116 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 6-23 所 示 。 


44 并 44 XK 
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图 6-21 设置 字符 选项 图 6-22 输入 文本 图 6-23 ”设置 字符 选项 


9 STEP 07 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-24 所 示 。 

9 STEP 08 在 “字符 ”面板 中 ，@ 设 置 “ 字 体系 列 ” 为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 30.29 点 、 
“行距 ”为 36 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0 “颜色 ”为 暗 蓝 色 ( RGB 参数 值 分 别 为 1、63、 
116 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 6-25 所 示 。 

eSTEP 09 人 @@ 单 击 “ 字 符 ” 右 侧 的 “段落 ”按钮 ， 展开 “段落 ”面板 ， 全 设置 “居中 对 齐 文本 ”， 如 


图 6-26 所 示 。 
#4 其 
属性 字符。 户 落 三 
em 
| 一 ' 属性 ”字符 ' 段落 
IT 30.29 点 v | 1 全 136 点 vi 
VA - 四 | | 于 ; 
' 列 0% ~ ' 堆 
上 了 T 工 100% I 100% | 一 
NA# 0 点 ie: BO . "|T 车 0 点 
' 国 -Ff|@ 激 活 | 工 避 头 尾 法 刚 设置 : 无 ~ 
fioecd AaT 间 86 组 合 襄 症 : 无 v 
美国 英语 vaa|l 赔 利 ~ 生字 
图 6-24 输入 文本 图 6-25 设置 字符 选项 图 6-26 设置 段落 选项 


i 
性 家 指点 )】 本 加、 居中 对 齐 文本 加 、 右 对 齐 文本 导 、 最 后 一 行 左 对 齐 [ 辆 、 最 后 一 行 居中 对 齐 
” 周 、 最 后 一 行 右 对 齐 [如 和 全 部 对 齐 [加 。 . 
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e STEP 10 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-27 所 示 。 


STEP 11 在 “字符 ”面板 中 ， 和 四 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 12 点 、“ 行 距 ” 
为 22.03 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -130、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参数 值 分 别 为 1、63、 


116 ) ; 四 激 活 仿 粗 体 图 标 ， 如 图 6-28 所 示 。 


其 
层 性 ”字符 外 落 三 
| 黑体 v 
1 
TI 12 占 v | 1 会 22.03 点 
VA 0 ~ | 四 -150 ~ 


美国 英语 v aa | 锐利 
图 6-27 输入 文本 图 6-28 设置 字符 选项 图 6-29 输入 文本 
eSTEP 13 在 “字符 ”面板 中 ， 和 全 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 12 点 、“ 行 距 ” 为 
19.01 点 、“ 设 置 所 选 字符 的 字 距 调整 为 0、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参数 值 分 别 为 1、63、116 ) ; 


四 激活 仿 粗 体 图 标 ， 如 图 6-30 所 示 。 
9 STEP 14 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-31 所 示 。 
9 STEP 15 选取 工具 箱 中 的 和 窍 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
无 、“ 描 边 ”为 蓝 色 ( RGB 参 数值 分 别 为 45、97、136 ) 、“ 设 置 形状 描 边 宽度 ”为 10 像 素 ， 在 图 像 
编辑 窗口 中 绘制 一 个 矩形， 并 按 Enter 键 确认 绘制 ， 效 果 如 图 6-32 所 示 。 


属性 字符 段落 = 
Tm 
yr 12 占 v|1 人 |19.01 点 > \ 
VAn 四。 -| 
i 0% ' 
1T 100% LL, 100% 
个 号 5 

图 激活 : 

fl ot aa 
美国 英语 v aa 锐利 
图 6-30 设置 字符 选项 图 6-31 输入 文本 图 6-32 ”绘制 矩形 
9 STEP 16 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 调整 ， 效 果 
如 图 6-33 所 示 。 


9 STEP 17 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
无 、“ 描 边 ”为 蓝 色 ( RGB 参数 值 分 别 为 44、97、136 ) 、“ 设 置 形状 描 边 宽度 ”为 10 像 素 ， 在 图 像 


Photoshop 
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编辑 窗口 中 绘制 一 个 如 图 6-34 所 示 的 形状 ， 得 到 “形状 1 ”图 层 ， 并 按 Enter 键 确认 绘制 。 
9 STEP 18 展开 “图 层 ” 面板 ， 复 制 “ 形 状 1” 图 层 ， 得 到 “形状 1 找 贝 ”图 层 ， 用 移动 工具 拖 忠 形 
状 ， 适 当 调 整形 状 位 置 ， 效 果 如 图 6-35 所 示 。 


图 6-33 ”调整 图 像 图 6-34 ”绘制 形状 图 6-35 复制 调整 形状 
@eSTEP 19 选取 工具 箱 中 的 横 排 文 字 工具 ， 和 选择“ 窗口 ”|“ 字 符 ” 人 命令， 在 弹出 的 “字符 ”面板 中 ， 
各 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 12 点 、“ 行 距 ” 为 22.03 点 、“ 设 置 所 选 字符 的 字 距 调 


整 ”为 0、“ 颜 色 ” 为 暗 蓝 色 ( RGB 人 参数 值 分 别 为 1、63、116 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 6-36 所 示 。 
9 STEP 20 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-37 所 示 。 


9 STEP 21 在 “字符 ”面板 中 ， 和 四 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 12 点 、“ 行 距 ” 为 14 
点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 900、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参数 值 分 别 为 1]、63、116 ) ; 


外 激活 仿 粗 体 图 标 ， 如 图 6-38 所 示 。 


se 3 | 时 
黑体 | “][- 下 “| 
'T 12 点 v| 局 |22.03 点 | ~ 
VA 0 “| 辆 。 v| 
商 0% ~ ! 
TT 100% T 100% z 
mm | 
国 < Ow 工 | 
fi etAaa 
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图 6-36 设置 字符 选项 图 6-37 输入 文本 图 6-38 设置 字符 选项 
e STEP 22 @ 单 击 “ 字 符 " 右 侧 的 “段落 ” 按钮， 展开“ 段落 ”面板 ，@ 设 置 “居中 对 齐 文本 ”， 如 
图 6-39 所 示 。 


一 ee 
家 指点 板 中 单 击 “ 居 中 对 齐 文本 ”按钮 ， 也 可 以 在 文字 工具 属性 栏 中 单 击 “居中 对 齐 文 
”本 ”按钮 。 
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9 STEP 23 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-40 所 示 。 


Fe = = = 


属性 ”字符 ， 段落 ， OQO 单 二 
堆 |0 点 让 0 点 
"县 0 点 + 车 0 点 
避 头 尾 法 刚 设置 : 无 v 
间 86 组 合 设 置 : 无 v 
站 活 圭 
图 6-39 设置 段落 选项 ”图 6-40 输入 文本 
9 STEP 24 选取 工具 箱 中 的 横 排 文 字 工 具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 
@O 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 7 点 、“ 行 距 ” 为 8 点 、“ 设 置 所 选 字 符 的 字 距 
调整 ”为 -50、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参 数值 分 别 为 1、63、116 ) ; 四 激活 仿 粗 体 图 标 ， 如 


图 6-41 所 示 。 
9 STEP 25 输入 相应 文本 ， 人 的 位 置 ， 人 图 6-42 所 示 。 


区 


和 mm 


美国 英语 
图 6-41 设置 字符 选项 图 6-42 输入 文本 


6.1.3 ”设计 新 品 发 布 图 层 狼 饰 效果 


在 新 品 发 布 H5 界 面 设计 中 ， 图 层 的 修饰 与 效果 样式 的 添加 ， 可 以 进一步 从 视觉 上 

区 分 主 次 。 下 面 详细 介绍 设计 新 品 发 布 图 层 装 饰 效 果 的 方法 。 其 操作 步骤 如 下 。 | 

9 STEP 01 展开 “图 层 ` 面板， 双击 “模特 ”图 层 ， 弹 出 “图 层 样 式 ” 对 话 框 ，@@ 选 扫 笨 看 视 鼎 

中 “投影 ” 复 选 框 ; 四 设置 “混合 模式 ”为 “正片 到 底 ”、“ 阴 影 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 

0 ) 、“ 不 透明 度 ” 为 37%、 “角度 ”为 118 度 、“ 距 离 ” 为 18 像素 、“ 扩 展 ” 为 11%， 如 图 6-43 所 示 。 
9 STEP 02 单 击 “确定 ”按钮 ， 为 图 层 添 加 投影 图 层 样式 ， 效 果 如 图 6-44 所 示 。 
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隘 消 


新 建 样式 {W)..， 


回 预 监 (V) 


图 6-43 ”设置 图 层 样 式 图 6-44 添加 图 层 样式 

eSTEP 03 在 “图 层 ” 面 板 中 ， 新 建 一 个 “和 矩形 4” 图 层 ， 将 图 层 拖 蝶 至 “模特 ”图 层 上 方 ， 如 图 6-45 
所 示 。 

9 STEP 04 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 填 充 为 淡 青 
色 ( RGB 参 数值 分 别 为 199、255、251 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形， 效果 如 
图 6-46 所 示 。 

© STEP “图 层 ” I 选取 “和 矩形 4” 图 层 ， SD “不 透明 度 ” 设 置 为 34%， 效 果 如 图 647 所 示 。 


在 Photoshop CC 2018 工 作 界面 中 ， 位 于 上 方 的 图 像 会 将 下 方 的 图 像 踪 住 ， 用 
区 户 可 以 通过 调整 各 图 像 的 顺序 改变 整 柱 图 像 的 显示 效果 。 : 


图 层 ” 著 径 通道 
P5k 到 vv 加 OTDRB e 
正常 v| 天 明度; 100% > 
斌 证 : 图 ww 中 世 自 填充 :100% 、 


© T 2018Yw China 2018 中国 【义乌 】 
名 ”和 芽 时尚 男 装 博览 会 | a 
9 工 中 国 [X 乌 ] - 2018 Yiw Chira 
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图 6-45 新建 并 抑 彼 图 层 图 6-46 ”绘制 矩形 图 6-47 调整 图 层 不 透明 度 
9 STEP 06 新 建 一 个 “椭圆 1” 图 层 ， 将 图 层 拖 电 至 “模特 ”图 层 下 方 ， 如 图 6-48 所 示 。 
9 STEP 07 单 击 “模特 ”图 层 缩 览 图 左 侧 的 “指示 图 层 可 见 性 ”按钮 ， 将 “模特 ”图 层 隐藏 ， 效 果 如 
图 6-49 所 示 。 
9 STEP 08 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 形状 、“ 填 充 ” 为 白色 
( RGB 参 数值 均 为 255 ) 、“ 描 边 ”为 无 ， 选 中 “椭圆 1” 图 层 ， 在 图 像 编辑 窗口 中 ， 按 住 Shifi 键 的 同 
时 拖 动 鼠标 左 键 ， 绘 制 一 个 如 图 6-50 所 示 的 正 圆 形 。 
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图 层 路径 过 这 
PP 类 vv 四 @TITID e 
正常 v 不 透明 度 : 100% ~ 
祝 定 : 图 zf 中 二 自 填充 : 100% ~ 
中 工 中 国 [义乌 ] ^ 
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图 6-48 ”新建 并 拖 旨 图 层 图 6-49 ”隐藏 图 层 图 6-50 ”绘制 椭圆 
9 STEP 09 在 “图 层 ” 面板 中 ， 双 击 “ 椭 圆 1” 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ，@ 选 中 “外 发 光 ” 复 选 
框 ; @ 设 置 “ 混 合 模 式 ” 为 “ 滤 色 ”、“ 不 透明 度 ” 为 100%、“ 杂 色 ” 为 100%、“ 发 光 颜 色 ” 为 白色 
( RGB 参 数值 均 为 255 ) 、“ 方 法 ”为 “柔和 ”、“ 大 小 ”为 250 像 素 、“ 沙 围 ” 为 50%， 如 图 6-51 所 示 。 
© STEP 10 单 击 “确定 ”按钮 ， 为 图 层 添 加 外 发 光 图 层 样式 ， 效 果 如 图 6-52 所 示 。 
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取 关 为 时 从 值 骂人 为 默 东 十 


图 6-51 设置 图 层 样 式 图 6-52 ”添加 图 层 样式 


9 STEP 11 选中 “椭圆 1” 图 层 ， 将 图 层 “ 填 充 ” 设 置 为 0， 效 果 如 图 6-53 所 示 。 
eSTEP 12 单 击 “ 模 特 ” 图 层 缩 览 图 左 侧 的 “指示 图 层 可 见 性 ” 按钮， 显示 “模特 ”图 层 ， 效 果 如 图 


6-5$4 所 示 。 至 此 ， 完 成 新 品 发 布 的 HS 页面 设计 。 
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图 6-S3 ”调整 设置 填充 图 6-54 ”显示 图 层 


I07 
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入 家 指点 在 Photoshop CC 2018 工 作 界 面 中 ， 图 层 缩 览 图 前 面 的 “指示 图 层 可 见 性 ”图 : 
一 一 >， 标 国 可 以 用 来 控制 图 层 的 可 见 性 。 显 示 该 图 标的 图 层 为 可 见 图 层 ， 无 该 图 标的 图 层 。 
为 隐藏 图 层 。 单 击 图 层 前 面 的 眼睛 图 标 ， 便 可 以 隐藏 该 图 层 。 如 果 需 要 显示 该 图 层 ， 则 在 原 眼 睛 
图 标 处 单 击 鼠 标 左 键 即 可 。 


区 区 允 数码 宣传 : 掌握 电 商 产品 的 H5 页 面 设计 


在 这 个 科技 快速 发 展 的 时 代 ， 数 码 产 品 的 更 新 换代 非常 频繁 ， 一 份 好 的 电 商 产品 H5 页 面 设计 就 是 
使 自己 的 产品 从 众多 的 数码 产品 及 竞争 对 手中 脱 疾 而 出 的 有 力 武 器 。 
本 实例 最 终 效果 如 图 6-55 所 示 。 


图 6-55 ”实例 效果 
素材 文件 ”| 素材 \ 第 6 章 \ 相 机 1.psd、 烟 雾 .psd、 相 机 2.jpg、 地 球 .jpg、 黑 白 镜头 .jpg 


效果 文件 “| 效果 \ 第 6 章 \ 掌 握 电 商 产 品 H5 页 面 设计 .psd、 掌 握 电 商 产 品 H5 页 面 设计 .jpg 
6.2.1 设计 电 丙 产品 杂 色 至 景 效果 


电 商 产品 页 面 的 背景 设计 ， 侧 重 于 演 染 烘托 氛围 ， 反 衬 内 容 ， 提 高 内 容 识别 度 。 

下 面 详细 介绍 设计 电 商 产品 杂 色 背景 效果 的 方法 。 其 操作 步 又 如 下 : 回忆 

@ STEP 01 选择 “文件 ” |“ 新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 和 设置 “名 称 ” 为 扫 码 着 视频 
“掌握 电 商 产品 H5 页 面 设计 ”、 “宽度 ”为 1080 像 素 、 “高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 / 英 
寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 6-56 所 示 ; @ 单 击 “ 创 建 ” 按 钮 ， 新 
建 一 个 空白 图 像 。 

9 STEP 02 展开 “图 层 ” 面板 ， 新 建 “ 图 层 1” 图 层 ， 设 置 前 景色 为 米 白 色 ( RGB 参数 值 分 别 为 248、 
248、246 ) ， 为 “图 层 1” 图 层 填充 米 白 色 ， 效 果 如 图 6-57 所 示 。 

9 STEP 03 选择 “ 滤 镜 ”|“ 杂 色 ”|“ 添 加 杂 色 ”命令 ， 弹 出 “添加 杂 色 ”对 话 框 ，@ 设 置 “ 数 量 ” 为 
7%; 四 选中 “高 斯 分 布 ” 单 选 按钮 和 “ 单 色 ” 复 选 框 ， 如 图 6-58 所 示 。 
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外 最 近 使 用 项 保存 R 片 医德 了 和 医 图 Web 获 动 没 备 胶片 和 视 沽 


IN \ 


图 6-56 设置 各 选项 


”在 Photoshop C Ce C 2018 工 作 界面 中 ， 用 “ 杂 色 ” 尖 针 组 下 的 命令 可 以 添加 或 和 
a . 去 图 像 中 的 杂 色 及 带 有 随机 分 布 色 阶 的 像素 。 


e STEP 04 单 击 “确定 ” 按钮 ， 为 图 层 ; 添加 杂 色 ， 效果 如 图 6-59 所 示 。。 


图 6-57 填充 前 景 2 设置 杂 色 参数 图 6-59 ”添加 杂 色 
9 STEP 05 按 Ctrl 十 O 组 合 键 ， pe “烟雾 .psd” 素 材 图 像 ， 用 移动 工具 拖 曙 图 像 到 图 像 编 辑 窗口 ， 效 果 
如 图 6-60 所 示 。 


9 STEP 06 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 位 置 及 大 小 ， 如 图 6-61 所 示 。 
© STEP 07 按 Enter 键 确认 变换 ， 效 果 如 图 6-62 所 示 。 


图 6-60 拖 虽 图 像 图 6-61 调整 图 像 图 6-62 ”确认 调整 


Photoshop 


HD 广 告 设计 


6.2.2 设计 电 商 产品 主体 布局 效果 


电 商 产品 页 面 的 设计 ， 首 先 要 考虑 到 将 所 发 布 的 产品 放 在 页 面 的 第 一 视觉 中 心 。 
下 面 详 细 介 绍 设计 电 商 产品 杂 色 背景 效果 的 方法 。 其 操作 步骤 如 下 。 
9 STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 相 机 1.psd” 素 材 图 像 ， 用 移动 工具 拖 忠 到 图 像 窗 
口中 ， 得 到 “相机 1” 图 层 ， 效 果 如 图 6-63 所 示 。 
9 STEP 02 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 如 图 6-64 所 示 。 


9 STEP 03 按 Enter 键 ， 确 认 图 像 调整 ， 效 果 如 图 6-65 所 示 。 


- 


图 6-63” 拖 缆 图 像 图 6-64 调整 图 像 图 6-65 ”确认 调整 
9 STEP 04 在 图 像 编辑 窗口 中 ， 选 中 “相机 1” 图 层 所 对 应 的 图 像 ， 按 住 Alt 键 的 同时 ， 用 鼠标 左 键 拖 动 
图 像 ， 复 制 得 到 “相机 1 拷贝 ”图 层 ， 效 果 如 图 6-66 所 示 。 
9 STEP 05 选中 “相机 1 找 贝 ”图 层 所 对 应 的 图 像 ， 按 Ctrl 十 IT 组合 键 ， 调 出 变换 控制 框 ， 将 图 层 自 由 变 
形 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 调整 变换 控制 框 上 的 锚 点 到 合适 的 位 置 ， 如 图 6-67 所 示 。 
9 STEP 06 将 图 像 调整 到 合适 的 效果 之 后 ， 按 Enter 键 确认 图 像 ， 并 用 移动 工具 拖 蝶 至 合适 的 位 置 ， 效 果 
如 图 6-68 所 示 。 


图 6-66 ” 拖 旨 复制 图 像 图 6-67 自由 变形 图 6-68 拖 旨 图 像 
e STEP 07 展开 “图 层 ” 面 板 ， 双 击 “ 相 机 1 拷贝 ”图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 人 @ 选 中 “颜色 芭 


推广 : 豆 销 展示 的 H2 广 告 设计 


加 ” 复 选 框 ; 全 设置 “混合 模式 ”为 “正常 ”、“ 芭 加 颜色 ”为 黑色 ( RGB 参数 值 均 为 0 ) 、“ 不 透 
明度 ”为 100%， 如 图 6-69 所 示 。 
eSTEP 08 单 击 “确定 ”按钮 ， 为 图 层 添加 图 层 样 式 ， 效 果 如 图 6-70 所 示 。 


峰 忆 栏 式 要 
样 下 阁 色 莹 加 | a 
Ss i (确定 
汽 SL 页 天 | | 一 一 一 一 一 一 一 一 一 一 一 下 二 - 
科 硬 和 ;3 I ee 枚 、 
由 层 ( DD | 忽 到 
等 志 sat 新 奸 标 式 (W). 
名 时 训 本 % 歌 认 仁 床 。 避 立 % 弄 认 值 回 预 点 (V) 


图 6-69 ”设置 图 层 样式 图 6-70 添加 图 层 样 式 

9 STEP 09 选择 “ 滤 镜 ” |“ 模糊”|“ 动 感 模糊 ”命令 ， 弹 出 “动感 模糊 ”对 话 框 ， 设 置 “角度 ”为 19 
度 、“ 距 离 ” 为 100 像 素 ， 如 图 6-71 所 示 。 

9 STEP 10 单 击 “确定 ”按钮 ， 为 图 层 添加 滤 镜 ， 效 果 如 图 6-72 所 示 。 

9 STEP 11 在 “图 层 ” 面 板 中 ， 选 中 “相机 1 拷贝 ”图 层 ， 将 图 层 的 “不 透明 度 ” 设 置 为 90%， 效 果 如 
图 6-73 所 示 。 


F—— 


[| 


图 6-71 设置 动感 模糊 图 6-72 ”添加 滤 镜 图 6-73 ”设置 不 透明 度 
9 STEP 12 按 Ctrl 十 O 组 合 键 ， 打 开 “ 相 机 2.jpg” 素 材 图 像 ， 按 Ctrl 十 J 组 合 键 ， 复 制 “ 背 景 ”图 层 ， 得 
到 “图 层 1” 图 层 ， 并 隐藏 “背景 ”图 层 ， 如 图 6-74 所 示 。 
9 STEP 13 选取 工具 箱 中 的 魔 棒 工具 ， 在 工具 属性 栏 中 设置 “ 容 差 ”为 30， 在 图 像 编辑 窗口 中 的 背景 区 
域 单 击 鼠 标 左 键 ， 创 建 选区 ， 按 Delete 键 ， 删 除 选区 内 的 图 像 ， 效 果 如 图 6-75 所 示 。 
© STEP 14 按 Ctrl 十 D 组 合 键 ， 取 消 选 区 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 辑 窗 口中 ， 得 到 “ 相 
机 2” 图 层 ， 效 果 如 图 6-76 所 示 。 
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”不 透明 度 : 100% 、 
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图 6-74 ”隐藏 背景 图 层 图 6-75 ”删除 选区 内 的 图 像 图 6-76 拖 虽 图 像 
9 STEP 15 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 调整 ， 效 果 
如 图 6-77 所 示 。 


9 STEP 16 在 图 像 编 辑 窗口 中 ， 选 中 “相机 2” 图 层 所 对 应 的 图 像 ， 按 住 Alt 键 的 同时 ， 用 鼠标 左 键 拖 动 
图 像 ， 复 制 得 到 “相机 2 拷贝 ”图 层 ， 效 果 如 图 6-78 所 示 。 

9 STEP 17 选中 “相机 2 拷贝 ”图 层 所 对 应 的 图 像 ， 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 将 图 层 自 由 变 
形 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 调整 变换 控制 框 上 的 锁 点 到 合适 的 位 置 ， 如 图 6-79 所 示 。 


调整 
图 6-77 ”调整 图 像 图 6-78 拖 间 复制 图 像 图 6-79 ”自由 变形 
e STEP 18 将 图 像 调整 到 合适 的 效果 之 后 ， 按 Enter 键 确认 图 像 ， 并 用 移动 工具 调整 到 合适 的 位 置 ， 效 果 


如 图 6-80 所 示 。 

9 STEP 19 展开 “图 层 ” 面板 ， 双 击 “ 相 机 2 撕 贝 ”图 层 ， 弹 出 “图 层 样式 ”对 话 框 ，@ 选 中 “颜色 攻 
加 ” 复 选 框 ;人 设置 “混合 模式 ”为 “正常 ”、“ 芭 加 颜色 ”为 黑色 ( RGB 参 数值 均 为 0 ) 、“ 不 透 
明度 ”为 100%， 如 图 6-81 所 示 。 

9 STEP 20 单 击 “ 确 定 ” 按 钮 ， 为 图 层 添加 图 层 样式 ， 效 果 如 图 6-82 所 示 。 

9 STEP 21 选择 “ 滤 镜 ” |“ 模糊 ”|“ 动 感 模糊 ”命令 ， 弹 出 “动感 模糊 ”对 话 框 ， 设 置 “ 角 度 ” 为 19 
度 、“ 距 离 ” 为 100 像 素 ， 如 图 6-83 所 示 。 

9 STEP 22 单 击 “ 确 定 ” 按 钮 ， 为 图 层 添加 滤 镜 ， 效 果 如 图 6-84 所 示 。 

9 STEP 23 在 “图 层 ” 面板 中 ， 选 中 “相机 2 乒 贝 ”图 层 ， 将 图 层 的 “不 透明 度 ” 设 置 为 68%， 效 果 如 
图 6-85 所 示 。 
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新 建 拌 共 {W).. 
也 览 (W) 


添加 图 层 样式 


图 6-82 


图 6-83 ”设置 动感 模糊 图 6-84 添加 滤 镜 图 6-85 ”设置 不 透明 度 
9 STEP 24 按 Ctrl 十 O 组 合 键 ， 打 开 “ 地 球 .jpg” 素 材 图 像 ， 按 Ctrl 十 J 组 合 键 ， 复 制 “ 背 景 ” 图 层 ， 得 到 
“图 层 1” 图 层 ， 并 隐藏 “背景 ”图 层 ， 如 图 6-86 所 示 。 
9 STEP 25 选取 工具 箱 中 的 魔 棒 工 具 ， 在 工具 属性 栏 中 设置 “ 容 差 ”为 30， 在 图 像 编辑 窗口 中 的 背景 区 
域 单 击 鼠 标 左 键 ， 创 建 选区 ， 按 Delete 键 ， 删 除 选 区 内 的 图 像 ， 效 果 如 图 6-87 所 示 。 
9 STEP 26 按 Ctrl 十 D 组 合 键 取消 选区 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 窗 口中 ， 将 得 到 的 新 
图 层 命名 为 “地 球 ” 图 层 ， 效 果 如 图 6-88 所 示 。 


图 层 路径 通道 


万 类 型 “| 加 GTZOSB 外 
正常 “， 下 秋明 度 ; 100% ~ 
谈 宇 : 图 ww 小 过 自 寺 充 : 100% ~ 
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图 6-86 ”隐藏 背景 图 层 图 6-87 删除 选区 内 的 图 像 图 6-88 拖 虽 图 像 
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汗 i 
HS 三 告 设计 


人 -) 在 Photoshop CC 2018 工 作 界 面 中 ， 魔 棒 工 具 用 来 创建 与 图 像 颜 色相 近 或 相同 : 
Ea / | 
的 像素 选区 ， 在 颜色 相近 的 图 像 上 单 击 鼠标 左 键 ， 即 可 选取 到 相近 的 颜色 范围 。 


ETE 


e STEP 27 展开 “图 层 ” 面 板 ， 选 中 “地 球 ”图 层 ， 将 其 拖 蝶 至 “相机 1” 图 层 下 方 ， 如 图 6-89 所 示 。 
9 STEP 28 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 调整 ， 效 果 


如 图 6-90 所 示 。 
9 STEP 29 在 图 像 编 辑 窗口 中 ， 选 中 “地 球 ” 图 层 所 对 应 的 图 像 ， 按 住 Alt 键 的 同时 ， 用 鼠标 左 键 拖 遇 图 


像 ， 复 制 得 到 “地 球 拷贝 ”图 层 ， 效 果 如 图 6-91 所 示 。 


园 层 路径 。 透 道 


PP 到 vv 国 @TUANM® 
正常 “| 不 透明 度 : 100% ~ 
谈 E: 图 中 局 看 填充 :100% ~ 
© 上 相机 1 拷贝 六 ~^ 


on 


国 6-89 拖 动 图 层 位 轩 图 6-90 ”调整 图 像 图 6-91 拖 旨 复制 图 像 
eSTEP 30 在 “图 层 ” 面 板 中 ， 选 中 “地 球 找 贝 ”图 层 ， 将 其 拖 电 至 “相机 2” 图 层 上 方 ， 如 图 6-92 


所 示 。 
9 STEP 31 选择 “编辑 |“ 变换 ” |“ 扭曲 ”命令 ， 调 出 变换 控制 框 ， 将 鼠标 移 至 控制 框 锚 点 上 ， 将 锚 


点 分 别 拖 虹 至 合适 位 置 ， 使 图 像 贴 合 “相机 2” 图 层 图 像 镜 头 ， 如 图 6-93 所 示 。 
9 STEP 32 按 Enter 键 ， 确 认 变 换 扭 曲 ， 效 果 如 图 6-94 所 示 。 


3D 图 层 通道 ”路径 

PikB vv 四 GOTDD e 
正常 v 不 透明 度 : 100% ~ 
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信 效果 
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9 记 DO@ 吕 从 ， 
图 6-92 ”调整 图 层 顺 序 图 6-93 ” 拖 动 锚 点 图 6-94 ”确认 变换 扭曲 


6.2.3 设计 电 商 


一 号 一- 


阅 产 品 
设计 电 商 产品 页 面 信息 时 ， 文 字 一 


第 6 章 ”产品 推广 


言 恩 吕 


组 效果 


字 一 定 要 与 
简洁 的 背景 图 像 会 形成 一 种 很 好 的 视觉 搭配 。 下 面 详 细 介 
打 的 方法 。 其 操作 步骤 如 下 


营销 展示 的 H5 广 


背景 及 图 像 互 衬 ， 简 单 明 了 的 广告 词 与 
绍 设计 电 商 产品 信息 点 缀 效 = on 
扫 码 看 视频 
e@e STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ，@ 设 
置 “ 字 体系 列 ” 为 “黑体 ” 字体 大 小 ”为 25.12 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字 
调整 ”为 -50、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ，@ 激 活 仿 粗 体 图 标 
9 STEP 02 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-96 所 示 。 
9 STEP 03 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 
为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0 


字符 的 字 距 
如 图 6-95 所 示 。 
“经 典 细 隶书 简 ” 

到 


、“ 字 体 大 小 ”为 24 “行距 ” 
“颜色 ”为 黑色 ( RGB 参数 值 均 为 0 ) ， 如 图 6-97 所 示 。 


图 6-95 


设置 字符 选项 


9 STEP 04 输入 相应 文本 ， 并 调整 至 合 


图 6-96 
村 到 “图 层 1 ”图 


时 


图 6-97 
e STEP 05 按 Ctrl 十 O 组 合 键 ， 打 开 “ 黑 白 镜 头 .jpg” 素 材 图 像 ， 按 Ctrl 十 J 组 合 键 ， 复 制 “ 背 景 ” 图 层 ， 
5 
域 单 击 鼠 标 左 键 ， 


适 的 位 置 ， 效果 如 图 6 98 且 示 。 
图 层 ， 并 隐藏 “ 图 层 ， 如 图 6-99 所 示 。 

9 STEP 06 选取 工具 箱 中 的 魔 棒 工具 ， 在 工具 属性 栏 中 设置 “ 容 差 ”为 30， 
创建 ; 


设置 字符 选项 


PD 类 型 


| 建 选区 ， 按 Delete 键 删除 选区 内 的 图 像 ， 效 果 如 图 6-100 所 示 。 
图 层 “路径 ”通道 至 
mmOGTHIDO e 

正常 v 不 委 明 度 : 100% 
饥 定 :图 ff 中 全 自 填充 


充 : 100% 
© EF 
背景 


在 图 像 编 辑 窗口 中 的 背景 区 
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图 6-98 输入 文本 
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图 6.99 隐藏 背 景 图 层 


图 6-100 ”删除 选取 区 内 的 图 像 


Photoshop 


HHD 广 各 设计 


RR) ge CC pop 本 当 图 像 中 相 针 像 素 的 颜色 相近 时 ， 用 户 本 可 | 
1 :> 以 运用 魔 棒 工 具 或 快速 选择 工具 进行 选取 。 容 差 用 来 控制 创建 选区 范围 的 大 小 , 数 、 
” 值 越 小 ， 所 要 求 的 颜色 越 相近 ， 数 值 越 大 ， 则 颜色 相差 越 大 。 


© STEP 07 按 Ct 十 D 组 合 甸 取消 药 区 ， 用 移动 工具 将 素材 图 像 拖 扎 至 背景 图 像 编辑 窗口 中 ， 效果 如 
图 6-101 所 示 。 

9 STEP 08 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 图 像 调 
整 ， 效 果 如 图 6-102 所 示 。 至 此 ， 完 成 电 商 产品 的 H5 页 面 设计 。 


7 . 
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图 6-101 拖 瘟 图像 图 6-102 ”调整 图 像 


区 潍 品牌 汽车 : 掌握 汽车 产品 的 H5 页 面 设 计 


随 着 时 代 的 进步 ， 汽 车 已 经 从 生活 中 的 奢侈 品 逐 渐 转 变 为 必 备 品 ， 同 时 伴随 着 的 也 是 汽车 品牌 的 
增多 ， 以 及 汽车 产品 的 面市 ， 设 计 出 一 个 极 具 吸引 力 的 汽车 产品 HS 页 面 效 果 ， 有 利于 推动 汽车 品牌 的 
宣传 及 销量 ， 使 其 从 众多 竞争 品牌 中 脱颖而出 。 

本 实例 的 最 终 效果 如 图 6-103 所 示 。 


XID 


长 ; 沙 新 代 


图 6-103 ”实例 效果 


第 6 章 ”产品 推广 : 营销 展示 的 H5 广 告 设计 


素材 文件 ”| 素材 \ 第 6 章 \ 汽 车 .psd 


效果 \ 第 6 章 \ 掌 握 汽 车 产品 H5 页 面 设计 .psd、 掌 握 汽 车 产品 H5 页 面 设计 .jpg 


6.3.1 设计 汽车 产品 页 面 育 景 效果 


汽车 产品 的 页 面 设计 通常 采用 黑白 色调 ， 演 染 气 氛 ， 
面 详细 介绍 设计 汽车 产品 页 面 背 景 效 果 的 方法 。 其 操作 步 又 如 下 。 Oe hn 

e STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 扫 码 看 视频 
为 “掌握 汽车 发 布 H5 页 面 设计 ”、“ 宽 度 ” Om “高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 
像素 /英寸 、“ 颜 色 模 式 ” 为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “和 白色 ”， 如 图 6-104 所 示 ; 全 单 击 “ 创 
建 ” 按 钮 ， 新 建 一 个 空白 图 像 。 

© STEP 02 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 人 @ 在 渐变 条 上 设置 黑色 到 白色 的 渐 
变 ( RGB 参 数值 分 别 为 0、0、0; 255、255、255 ) ; 四 单 击 “新 建 ” 按 钮 ， 新 建 渐 变 预 设 ， 如 图 6-105 
所 示 。 


给 品牌 带 来 一 种 神秘 感 。 下 


be (这 ) 


和 最近 使 用 项 已 保存 照 打 E Web 加 8 各 这 片 和 视 ; rrampr. 职 消 | 
人 AZ 
本 Z20 ar 


| [BF 


颜色 : 位 置 (C): J |% 是 除 (D) 


图 6-104 设置 各 选项 图 6-105 新建 渐变 预 设 

9 STEP 03 展开 “图 层 ” 面 板 ， 在 面板 下 方 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 并 选 
取 工 具 箱 中 的 渐变 工具 ， 在 图 像 编 辑 窗口 中 ， 由 上 至 下 拖 动 鼠标 填充 黑白 线性 渐变 ， 效 果 如 图 6-106 
所 示 。 

9 STEP 04 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
黑色 ( RGB 参 数值 均 为 0 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗 口中 绘制 一 个 如 图 6-107 所 示 的 椭圆 ， 得 到 
“椭圆 1” 图 层 。 

9 STEP 05 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 调整 ， 效 
果 如 图 6-108 所 示 。 


”在 Photoshop CC 2018 工 作 界 面 中 ， 如 果 需 要 调整 图 像 的 大 小 及 位 置 ， 可 以 选 
ED 择 “ 编 辑 ” 1 “自由 变换 ” ”命令 ， 用 移动 工具 可 以 对 图 像 进行 位置 调整 。 \ 
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图 6-106 填充 线性 渐变 图 6-107 ”绘制 椭圆 图 6-108 调整 图 像 
9 STEP 06 在 “图 层 ” 面板 中 ， 双 击 “ 李 圆 1” 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ，@ 选 中 “内 发 光 ” 复 
选 框 ; 四 设置 “混合 模式 ”为 “正常 ”、“ 不 透明 度 ” 为 100%、“ 杂 色 ” 为 0、“ 发 光 颜 色 ” 为 白色 
( RGB 参 数值 均 为 255 ) 、“ 方 法 ”为 “精确 ”、“ 源 ”为 “边缘 ”、“ 阻 塞 ” 为 43%、 “大 小 ”为 38 
像素 、“ 范 围 ”为 100%、“ 持 动 ” 为 100%， 如 图 6-109 所 示 。 
@ STEP 07 单 击 “确定 ”按钮 ， 为 图 层 添 加 图 层 样式 ， 效 果 如 图 6-110 所 示 。 


图 层 样 过 pe 
为 点 光 本 
样 坏 a ne 确定 | 
党 合计 三 | 1 一 
1 5 略 植 式 ,| 正常 1 取消 
科隆 1 :6 日 喧 1 
= 1 新 建 样式 (W).… 
1 站 名 全 0 1 
1 本 1 m7 
| o 加 本 蜗 (V) 
1 1 
1 ”图 到 I 
1 1 
1 方 去 ; 精 倘 1 
原 ; 〇 居中 国 加 过 各 
1 阴 芝 人 43 % | 
1 下 1 
1 1 “Tt 
| Es 消除 刻 上 (D) | 四 设置 
| 入 I(R) 1D0 % . 
1 拉动 QO); DO |% | 
| ee eR Nl eet 
识 置 为 匠 认 值 复习 洁 县 ! 认 信 
i 全 
图 6-109 设置 图 技 样 式 图 6-110 添加 图 层 样式 


6.3.2 ”设计 汽车 产品 界面 框 洒 效果 


大 多 数 汽车 产品 都 会 在 车 身 的 线条 上 下 功夫 ， 为 了 迎合 汽车 的 特色 ， 在 汽车 页 面 
效果 的 设计 中 可 以 加 入 一 些 线 条 框架 ， 这 样 既 能 够 增加 页 面 的 美观 上 度 ， 双 能够 突出 产 
品 的 特色 。 下 面 详 细 介 绍 设计 汽车 产品 界面 框架 效果 的 方法 。 其 操作 步骤 如 下 。 

9 STEP 01 按 Ctrl 十 0 组 合 键 ， 打开“ 汽车 .psd” 素材 图 像 ， 用 移动 工具 拖 蝶 到 图 像 编 辑 窗口 中 ， 得 到 
“汽车 ”图 层 ， 效 果 如 图 6-111 所 示 。 

e STEP 02 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 如 图 6-112 所 示 。 

© STEP 03 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 
为 无 、“ 描 边 ” 为 白色 ( RGB 参数 值 均 为 2355 ) 、 “宽度 ”为 2 像素 ， 在 图 像 编辑 窗口 中 绘制 一 个 如 图 


: 营销 展示 的 H5 厂 告 设计 


6-113 所 示 的 矩形， 得 到 “和 矩形 1” 图 层 。 


图 6-111 拖 提 图 像 图 6-112 ”调整 图 像 图 6-113 ”绘制 矩形 
9 STEP 04 在 图 像 编 辑 窗口 中 ， 选 中 “和 珑 形 1” 图 层 所 对 应 的 图 像 ， 按 住 Alt 键 的 同时 用 鼠标 左 键 拖 中 图 
像 ， 复 制 得 到 “和 矩形 1 找 贝 ”图 层 ， 效 果 如 图 6-114 所 示 。 
9 STEP 05 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 在 工具 属性 栏 中 设置 “旋转 ”为 -90 度 ， 适 当 调 整 图 像 
大 小 及 位 置 ， 效 果 如 图 6-115 所 示 
9 STEP 06 在 图 像 编 辑 窗口 中 ， 选 中 “和 矩形 1 乒 贝 ”图 层 所 对 应 的 图 像 ， 按 住 Shift 十 Alt 组 合 键 的 ， 同 时 
用 鼠标 左 键 垂 直 拖 蝶 图 像 至 合适 的 位 置 ， 得 到 “和 矩形 1 找 贝 2” 图 层 ， 效 果 如 图 6-116 所 示 。 


在 Photoshop CC 2018 工 作 界 面 中 ， 在 设计 或 修 图 时 可 以 配合 使 用 shift 键 。 
: > 绘制 直线 : 按 住 Shif 键 ， 拖 动 鼠 标 时 可 以 强制 笔触 沿 水 平 或 者 垂直 方向 移动 。 
: > 移动 图 像 : 按 住 Shift 键 ， 拖 动 图 像 时 可 以 让 图 像 进 行 水 平 或 者 垂直 方向 的 移动 。 | 
: > 执行 强制 比例 : 在 缩放 图 形 时 ， 按 住 Shift 键 ， 会 按照 图 像 的 原 比例 进行 缩放 。 


图 6-114 拖 旨 复制 图 像 图 6-115 调整 图 像 图 6-116 拖 旨 复制 图 像 
e STEP 07 选中 “和 矩形 1” 图 层 所 对 应 的 图 像 ， 按 住 Shift 十 Alt 组 合 键 ， 同 时 按 住 鼠 标 左 键 水 平 拖 蝶 图 像 


至 合适 的 位 置 ， 得 到 “ 甜 形 1 拷贝 3” 图 层 ， 效 果 如 图 6-117 所 示 。 
9 STEP 08 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 ， 效 果 如 图 6-118 所 示 。 


Photoshop 
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拖 奥 


图 6-117 拖 瘟 复制 图 像 图 6-118 ”调整 图 像 
9 STEP 09 选中 “和 矩形 1 拷贝 3 ”图 层 对 应 的 图 像 ， 按 住 Shift 十 Alt 组 合 键 ， 同 时 按 住 鼠 标 左 键 垂 直 抑 电 
图 像 至 合适 的 位 置 ， 得 到 “和 窍 形 1 乒 贝 4” 图 层 ， 效 果 如 图 6-119 所 示 
9 STEP 10 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 ， 效 果 如 图 6-120 所 示 。 
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图 6-119 拖 旧 复制 图 像 图 6-120 调整 图 像 


6.3.3 设计 汽车 产品 文子 修饰 效果 


设计 汽车 产品 的 推广 页 面 时 ， 一 定 要 人 简单， 不 用 赋予 过 多 的 信息 ， 要 让 产品 保持 
神秘 感 ， 以 勺 起 人 们 的 兴趣 。 下 面 详细 介绍 设计 汽车 产品 文字 修饰 效果 的 方法 。 其 操 


作 步 又 如 下 。 
9 STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “ 字 体系 列 ” 为 “ 创 艺 繁 隶 书 ”、 “字体 大 小 ”为 64 点 、“ 行 距 ” 为 “自动 ” 、“ 设 置 所 选 字 符 的 


字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 235 ) ， 如 图 6-121 所 示 。 

@ STEP 02 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-122 所 示 。 

9 STEP 03 选取 工具 箱 中 的 横 排 文字 工具 ， 和 选择“ 窗口 ” |“ 字符” 谷 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 18 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调 
整 ” 为 0(、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 6-123 所 示 。 


上 展示 的 HD2 广 告 设计 


x 站 x 
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关 国 英语 “| 设置 a | 四 美国 英语 平 
图 6-121 设置 字符 选项 图 6-122 输入 文本 图 6-123 ”设置 字符 选项 

9 STEP 04 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-124 所 示 。 

9 STEP 05 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 
各 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 38.77 点 、“ 行 距 ” 为 “自动 ” 、“ 设 置 所 选 字符 的 
字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ee  @ 激 活 仿 入 体 图 标 ， 如 图 6-125 所 示 。 

9 STEP 06 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 6-126 所 示 。 
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图 6-124 输入 文本 图 6-125 设置 字符 选项 图 6-126 输入 文本 

9 STEP 07 展开 “图 层 ” 面 板 ， 在 “汽车 ”图 层 上 方 新 建 一 个 “图 层 2” 图 层 ， 如 图 6-127 所 示 。 

9 STEP 08 选中 “图 层 2” 图 层 ， 设 置 前 景色 为 白色 pi ， 选 取 工 具 箱 中 的 画笔 工 
具 ， 在 工具 属性 栏 中 设置 “大 小 ”为 200 像 素 、“ 模 式 ” 为 “正常 ”、“ 不 透明 度 ” 为 100%、“ 流 
量 ” 为 100%6、“ 平 滑 ” 为 10%， 在 如 图 6-128 所 示 的 两 个 位 置 涂抹 两 个 白斑 。 

9 STEP 09 在 “图 层 ” 面 板 中 ， 设 置 “ 图 层 2” 图 层 的 “混合 模式 ”为 “线性 光 ”， 如 图 6-129 所 示 。 

9 STEP 10 选择 “ 滤 镜 ”|“ 模 糊 ”|“ 径 向 模糊 ”命令 ， 弹 出 “ 径 向 模糊 ”对 话 框 ,设置 “数量 ”》 
100、“ 模 糊 方法 ”为 “缩放 ”、 “品质 ”为 “好 ”， 如 图 6-130 所 示 。 


在 Photoshop CC 2018 工 作 界 面 中 ， 图 层 混 合 模式 用 于 控制 图 层 之 间 像 素颜 色 \ 
中 所 相互 融合 的 效果 ， 不 同 的 混合 模式 会 得 到 不 同 的 效果 。 由 于 混合 模式 用 干 控制 上 下 
两 人 图 有 在 各 时 所 显示 的 总 体 放 时， 通 党 为 上 方 的 图 居 造 择 合 天 的 浊 合 术 葡 。 
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图 6-127 新 建 图 层 


XID 


长 沙 授权 经 销 商 


长 沙 新 代 


图 6-128 涂抹 画笔 图 6-129 更改 混 合 模式 


eSTEP 11 单 击 “确定 ”按钮 ， 为 图 层 添加 滤 镜 ， 效 果 如 图 6-131 所 示 。 
9 STEP 12 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适当 调整 图 像 大 小 及 位 置 ， 效 果 如 图 6-132 所 示 。 
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图 6-130 ”设置 径 向 模糊 
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图 6-131 添加 滤 镜 图 6-132 ”调整 图 像 


eSTEP 13 在 “图 层 ” 面 板 中 ， 选 中 “汽车 ”图 层 ， 选 择 “ 图 像 ”|“ 调 整 ” | “曲线 ”命令 ， 弹 出 “ 曲 
线 ” 对 话 框 ， 人 四 在 曲线 上 单 击 鼠标 左 键 新 建 一 个 控制 点 ; 四 在 下 方 设 置 “ 输 入 ”为 206、“ 输 出 ”为 


162 ， 如 图 6-133 所 示 。 


e STEP 14 单 击 “ 确 定 ”按钮 ， 即 可 调整 “汽车 ”图 像 的 色 阶 ， 效 果 如 图 6-134 所 示 。 至 此 ， 完 成 汽车 
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设置 曲线 图 6-134 调整 图 像 和 色 阶 


活动 推广 是 企业 或 公司 根据 自身 的 一 些 需求 ， 举 办 的 一 些 创意 性 的 活 
动 ， 吸 引 消 费 者 和 参与， 从 而 推广 企业 或 公司 的 形象 ， 以 及 促进 产品 的 销售 。 


本 章 主要 介绍 活动 推广 H5 广 告 设计 的 方法 。 


掌握 砸 金 蛋 的 HS 页面 设计 
掌握 抽奖 活动 的 H5 页 面 设计 
掌握 投票 活动 的 H5 页 面 设计 
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新 春 活动 : 掌握 三 金 蛋 的 H5 页 面 设计 


新 春 也 意 指 为 春节 ， 古 中 国 传统 上 的 农历 新 年 ， 而 春节 举办 的 新 春 活动 则 可 以 说 是 中 国 的 特色 活 
动 ， 一 些 企业 为 博取 热点 ， 会 在 春节 举行 一 些 喜 庆 活动 ， 大 部 分 都 是 以 同 客 忆 赠 送 福 利 来 吸引 客户 ， 
从 而 提高 产品 销量 。 

本 实例 最 终 效 果 如 图 7-1 所 示 。 


图 7-1 实例 效果 
素材 \ 第 7 章 \ 房 子 .psd、 红 和 转 楼 梯 .psd、 金 蛋 红 带 .psd、 敲 金 蛋 .psd、 小 黄 鸡 .psd、 灯 算 psd、 新 


Se 春 烟 火 .psd 


7.1.1 设计 磺 金 重新 春 育 景 效 果 


本 节 H5 的 页 面 设计 主题 是 新 春 活动 ， 所 以 在 设计 背景 时 ， 突 出 主题 便 是 设计 的 重 
点 。 下 面 详细 介绍 设计 砸 金 重新 春 背景 效果 的 方法 。 其 操作 步骤 如 下 。 回 些 
9 STEP 01 选择 “文件 ” |“ 新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 设 置 “名 称 ”为 扫 码 着 视 频 
“掌握 砸 金 蛋 HS 页 面 设 计 ”、“ 宽 度 ” ed a “高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 像 素 / 英 
寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、“ 背 景 内容 ” 为 “和 白色 ”， 如 图 7-2 所 示 ， 然 后 单 击 “ 创 建 ” 按 
钮 ， 新 建 一 个 空白 图 像 。 


图 7-2 设置 各 选项 
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9 STEP 02 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 四 在 渐变 条 上 设置 深蓝 色 到 紫色 的 
渐变 ( RGB 参数 值 分 别 为 "9、42、217; 131、5、166 ) ; 四 单 击 “新 建 ” 按 钮 ， 新 建 渐 变 预 设 ， 如 
图 7-3 所 示 。 

e STEP 03 展开 “图 层 ” 面 板 ， 在 面板 下 方 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 。 选 取 
工具 箱 中 的 渐变 工具 ， 选 择 新 建 的 深蓝 色 到 紫色 的 渐变 色 ， 在 工具 属性 栏 中 单 击 “ 径 向 渐变 ”按钮 ， 
在 图 像 编 辑 窗口 中 的 适当 位 置 ， 拖 动 鼠 标 左 键 为 图 层 添加 径 向 渐变 ， 效 果 如 图 7-4 所 示 。 

9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 房 子 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编辑 窗口 中 的 
合适 位 置 ， 并 将 图 层 命名 为 “房子 ”， 效 果 如 图 7-5 所 示 。 


ET -4 关 充 任 向 尖 7.5 失 久 国信 


9 STEP 05 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-6 所 示 。 


9 STEP 06 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
粉色 ( RGB 参 数值 分 别 为 255、145、148 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 如 图 7-7 所 示 
的 形状 ， 得 到 “形状 1” 图 层 。 

9 STEP 07 按 Enter 键 确认 形状 绘制 ， 效 果 如 图 7-8 所 示 。 


图 7-6 调整 图 像 图 7-7 绘制 形状 图 7-8 ”确认 绘制 
9 STEP 08 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
红色 ( RGB 参 数值 分 别 为 255、0、0 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗 口中 绘制 一 个 如 图 7-9 所 示 的 形 


状 ， 得 到 “形状 2” 图 层 。 
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e STEP 09 按 Enter 键 ， 确 认 形 状 绘制 ， 效 果 如 图 7-10 所 示 。 


9 STEP 10 按 Ctrl 十 O 组 合 键 ， 打 开 “ 红 毯 楼 梯 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 电 至 图 像 编 辑 窗口 
中 的 合适 位 置 ， 效 果 如 图 7-11 所 示 。 


图 7-9 ”绘制 形状 图 7-10 ”确认 绘制 图 7-11 拖 复 图 像 
9 STEP 11 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-12 所 示 。 
e STEP 12 按 Ctrl 十 O 组 合 键 ， 打 开 “ 金 蛋 红 带 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编 辑 窗 口 
中 的 合适 位 置 ， 效 果 如 图 7-13 所 示 。 
9 STEP 13 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适当 调整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-14 所 示 。 


图 7-12 ”调整 图 像 


7.1.2 ”设计 砸 金 重 元 素 贸 饰 效 果 


在 设计 新 春 活动 页 面 时 ， 相 关 元 素 的 添加 装饰 能 够 让 页 面 整体 更 贴近 主题 。 下 面 
详细 介绍 设计 砸 金 蛋 元 素 装 饰 效 果 的 方法 。 其 操作 步骤 如 下 。 


像 编辑 窗口 中 的 合适 位 置 ， 并 将 图 层 命 名 为 “灯笼 ”， 效 果 如 图 7-15 所 示 。 
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9 STEP 02 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-16 所 示 。 

9 STEP 03 选择 “ 滤 镜 ”|“ 模 糊 ”|“ 动 感 模糊 ”命令 ， 在 弹出 的 “动感 模糊 ”对 话 框 中 设置 “角度 ” 
为 55 度 、“ 距 离 ” 为 25 像 素 ， 如 图 7-17 所 示 。 


FPF-—— 


图 7-15 拖 息 图 像 图 7-16 调整 图 像 图 7-17 设置 滤 镜 选项 

9 STEP 04 单 击 “确定 ”按钮 ， 为 图 层 添加 动感 模糊 滤 镜 ， 效 果 如 图 7-18 所 示 。 

9 STEP 05 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 忠 “ 灯 答 ” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 复 制 
得 到 “ 灯 算 拷贝 ”图 层 ， 效 果 如 图 7-19 所 示 。 

9 STEP 06 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-20 所 示 。 


图 7-18 ”添加 动感 模糊 图 7-19 复制 图 像 图 7-20 ”调整 图 像 

9 STEP 07 展开 “图 层 ” 面 板 ， 选 中 “灯笼 拷贝 ”图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “ 灯 和 拷贝 2” 
层 ,， 将 “ 灯 算 拷贝 2” 图 层 拖 蝶 至 “ 灯 竹 ”图 层 下 方 ， 如 图 7-21 所 示 。 

9 STEP 08 在 图 像 编辑 窗口 中 ， 用 移动 工具 适当 调整 图 像 位 置 ， 效 果 如 图 7-22 所 示 。 

9 STEP 09 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 卸 “ 和 灯笼” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 得 到 
“灯笼 找 贝 3” 图 层 ， 效 果 如 图 7-23 所 示 。 

9 STEP 10 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 按 Enter 键 确认 变换 ， 并 在 
“图 层 ” 面 板 中 调整 图 像 的 “不 透明 度 ” 为 87%， 效 果 如 图 7-24 所 示 。 
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图 7-21 复制 并 拖 旭 图 层 图 7-22 ”调整 图 像 位 置 图 7-23 复制 拖 旨 图 像 
9 STEP 11 展开 “图 层 ” 面板 ， 选 中 “灯笼 ”图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “灯笼 拷贝 4” 图 层 按 
Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 按 Enter 键 确认 变换 ， 效 果 如 图 7-25 
所 示 。 
9 STEP 12 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 卸 “ 和 灯笼” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 得 到 
“灯笼 乒 贝 $5” 图 层 ， 效 果 如 图 7-26 所 示 。 


图 7-24 调整 图 像 图 7-25 复制 并 调整 图 像 图 7-26 ” 拖 复 复制 

9 STEP 13 展开 “图 层 ” 面板 ， 选 中 “灯笼 乒 贝 ” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “灯笼 拷贝 6” 
层 ， 用 移动 工具 适当 调整 图 像 位 置 ， 并 在 “图 层 ” 面 板 中 ， 设 置 图 层 的 “不 透明 度 ” 为 78%， 效 果 如 
图 7-27 所 示 。 

9 STEP 14 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 曙 “ 和 灯笼” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 得 到 
灯笼 找 贝 7” 图 层 ， 效 果 如 图 7-28 所 示 。 

9 STEP 15 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 按 Enter 键 确认 变换 ， 并 在 
“图 层 ” 面 板 中 ， 设 置 图 层 的 “不 透明 度 ” 为 78%6， 效 果 如 图 7-29 所 示 。 

e STEP 16 按 Ctrl 十 O 组 合 键 ， 打开“ 新 春 烟火 psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 抱 到 图 像 编 辑 窗口 
中 的 合适 位 置 ， 并 将 “图 层 ” 命 名 为 “新 春 烟 火 ”， 效 果 如 图 7-30 所 示 。 

9 STEP 17 展开 “图 层 ” 面 板 ， 将 “新 春 烟火 ”图 层 拖 中 到“ 灯 算 拷贝 7” 图 层 下 方 ， 如 图 7-31 所 示 。 

9 STEP 18 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-32 所 示 。 


第 7 章 “活动 推广 ; 互动 投票 的 H5 广 告 设计 


图 7-29 调整 图 像 
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7-30 导入 并 拖 旨 图 像 7-31 拖 旨 图 层 图 7-32 ”调整 图 像 
9 STEP 19 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 动 “ 新 春 烟火 ”图 层 所 对 应 的 图 像 至 合适 位 置 ， 
复制 得 到 “新 春 烟火 拷贝 ”图 层 ， 效 果 如 图 7-33 所 示 。 
9 STEP 20 展开 “图 层 ” 面板 ， 将 “新 春 烟 火 乒 贝 ”图 层 拖 虹 至 “灯笼 拷贝 6” 图 层 下 方 ， 如 图 7-34 
所 示 。 
9 STEP 21 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-35 所 示 。 
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9 STEP 22 按 Ctrl 十 O 组 合 键 ， 打 开 “ 小 黄 鸡 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 中 至 图 像 编 辑 窗口 中 
的 合适 位 置 ， 并 将 图 层 命 名 为 “小 黄 鸡 ”， 效 果 如 图 7-36 所 示 。 

9 STEP 23 按 Ctrl 十 IT 组合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-37 所 示 。 


图 7-36 ”导入 并 拖 旭 图 像 图 7-37 调整 图 像 
9 STEP 24 按 Ctrl 十 O 组 合 键 ， 打 开 “ 敲 金 蛋 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编辑 窗口 中 
的 合适 位 置 ， 并 将 图 层 命 名 为 “ 敲 金 蛋 ”， 效 果 如 图 7-38 所 示 。 
9 STEP 25 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 7-39 所 示 。 


7.13 ”设计 砸 金 重 文子 投 钮 效果 


新 春 活动 HS 的 页 面 设计 ， 要 体现 出 新 春 主 题 ， 同 时 也 要 在 HS 的 基础 上 体现 出 下 
互 设计 。 下 面 详 细 介 绍 设计 砸 金 蛋 文字 按钮 效果 的 方法 。 其 操作 步骤 如 下 。 码 看 视频 
9 STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “ 字 体系 列 ” 为 “方正 粗 圆 简体 ”、“ 字 体 大 小 ”为 20.03 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字 
符 的 字 距 调整 ”为 500、“ 颜 色 ” 为 黄色 ( RGB 参 数值 分 别 为 255、255、0 ) ， 如 图 7-40 所 示 。 
9 STEP 02 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 7-41 所 示 。 
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图 7-40 设置 字符 各 选项 图 7-41 输入 文本 
9 STEP 03 展开 “图 层 ” 面 板 ， 选 中 “欢乐 砸 金 蛋 ” 文 字 图 层 ， 选 取 工 具 箱 中 的 横 排 文字 工具 ， 在 工 
具 属 性 栏 中 ， 单 击 “ 创 建文 字 变 形 ” 按 钮 ， 在 弹出 的 “变形 文字 ”对 话 框 中 ， 引 设置 “样式 ”为 “ 扇 
形 ”; 四 设置 “弯曲 ”为 33%; 自选 中 “水 平 ” 单 选 按钮 ， 如 图 7-42 所 示 。 
@ STEP 04 单 击 “ 和 确定 ”按钮 ， 添 加 文字 变形 ， 效 果 如 图 7-43 所 示 。 


1 水平 扭 曲 (9): 


垂直 扭曲 (E): 


py 42 pp 图 7-43 


添加 文字 变形 


i 
RD \ 


: 在 Photoshop CC 2018 工 作 界面 中 ， 通 过 “变形 文字 ”对 话 框 可 以 对 选 定 的 文字 进行 多 种 变形 
操作， 使 文字 更 加 富有 灵动 感 。 : 
: 在 “文字 变形 ”对 话 框 中 ， 有 以 下 几 种 设置 。 

:> 水 平 /垂直 : 文本 的 扭曲 方向 为 水 平方 向 或 垂直 方向 。 

:> 样式 : 在 该 选项 的 下 拉 列表 中 有 15 种 变形 样式 。 

: > 弯曲 : 设置 文本 的 弯曲 程度 。 

:> 水 平 扭曲 /垂直 扭曲 : 可 以 对 文本 应 用 透视 。 


人 字体 大 小 ” 
行距 ”为 “自动 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 500、 
255、255、0 ) ， 如 图 7-44 所 示 。 


为 20.03 点 、 
“颜色 ”为 黄色 ( RGB 参 数值 分 别 为 


Kl 
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9 STEP 06 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 7-45 所 示 。 

9 STEP 07 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “方正 粗 圆 简体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 
距 ”为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 900、“ 颜 色 ” 为 黄色 ( RGB 参 数值 分 别 为 255、 
255、0 ) ， 如 图 7-46 所 示 。 


v 拉 自动 
v 500 


ieddt 4 
美国 英语 v aa 平 骨 


图 7-44 设置 字符 各 选项 图 7-45 ”输入 文本 图 7-46 设置 字符 各 选项 

9 STEP 08 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 7-47 所 示 。 

9 STEP 09 选取 工具 箱 中 的 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
深 黄色 ( RGB 参 数值 分 别 为 243、152、0 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 矩形 ， 得 到 
“和 矩形 1” 图 层 ， 适 当 调 整 和 矩形 的 大 小 及 位 置 ， 效 果 如 图 7-48 所 示 。 

9 STEP 10 展开 “图 层 ” 面 板 ， 选 中 “ 甜 形 1” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “ 甜 形 1 拷贝 ”图 
层 ， 如 图 7-49 所 示 。 

9 STEP 11 选中 “ 甜 形 1 拷贝 ”图 层 ， 选 取 工 具 箱 中 的 和 窍 形 工具 ， 在 工具 属性 栏 中 将 “填充 ”更 改 为 黄 
色 ( RGB 参数 值 分 另 


~ 李 诅 明度 : 100% 
外 sz 中 共和 看 二 这 :100% ~ 


ee 
T | 十 嘲 


了 工 “欢乐 涯 爹 契 


© 国 磺 全 下 
© 图 小 黄 鸡 


已 图 灯 泛 扶风 7 


© 辣 将 三 
co 大 四 9 四 避让 


图 7-47 输入 文本 图 7-48 ”绘制 矩形 图 7-49 复制 图 层 图 7-50 ”更改 填充 
© STEP 12 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 矩 形 的 大 小 ， 效 果 如 图 7-$1 所 示 。 
9 STEP 13 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 


置 “字体 系列 ”为 “方正 粗 圆 简体 ”、“ 字 体 大 小 ”为 14 点 、“ 行 中 ”为 “自动 ”、“ 设 置 所 选 字 符 


的 字 距 调整 ”为 3900、“ 颜 色 ” 为 褐色 ( RGB 参 数值 分 别 为 128、42、42 ) ， 如 图 7-52 所 示 。 


fi 8 引 设 置 h Tl] % 
美国 英语 v aa 平 骨 
图 7-51 ”调整 矩形 图 7-52 设置 字符 各 选项 图 7-53 ”输入 文本 
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抽奖 活动 可 以 说 是 各 个 商场 每 年 都 会 举办 的 活动 ， 先 引起 消费 者 的 注意 ， 然 后 在 别人 抽取 到 奖品 
时 ， 产 生 购买 欲望 ， 在 提升 商场 形象 的 同时 又 能 够 提高 商场 货物 的 销售 额度 。 
本 实例 的 最 终 效果 如 图 7-54 所 示 。 


图 7-54 实例 效果 
素材 \ 第 7 章 \ 与 脸 psd、 手 机 .psd、 积 分 金币 1.psd、 积 分 金币 2.psd、 积 分 金币 3.psd、 相 机 .psd、 
素材 文件 | 笔记 本 .psd、 无 人 机 .psd、 现 金 .psd、 液 晶 电 视 .psd、 花 简 .psd、 烟 火 .psd、 爆 竹 .psd、 灯 笼 
2.psd 


效果 \ 第 7 章 \ 掌 握 抽奖 活动 H5 页 面 设计 .psd、 掌 握 抽奖 活动 H5 页 面 设计 .jpg 
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7.2.1 设计 抽奖 活动 转盘 底盘 效果 


抽奖 活动 的 方式 有 很 多 ， 最 能 刺激 消费 者 心理 的 就 是 转盘 转动 抽奖 ， 所 以 在 设计 “ 喀 
商场 抽奖 活动 页 面 时 ， 选 取 转 盘 的 效果 设计 。 下 面 详细 介绍 设计 抽奖 活动 转盘 底盘 效 ” 辐 坚 " 下 部 站 
果 的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 
e STEP 01 选择 “文件 ”| “新建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “掌握 抽奖 活动 

H5 页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 / 英 寸 、“ 颜 色 模 
式 ” 为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 7-55 所 示 ; @ 单 击 “ 创 建 ” 按 钮 ， 新 建 一 个 空 


白 图 像 。 


( 最 近 使 用 项 已 保存 | 属 片 ”打印 


= ~、 
一 贴 板 
1X 命 好 pH 


目 定 
600x 600 像 赛 镶 300 ppi 


图 7-55 设置 各 选项 

9 STEP 02 展开 “图 层 ” 面 板 ， 在 面板 下 方 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 设置 
前 景色 为 深 红 色 ( RGB 参数 值 分 别 为 197、4、4 ) ， 为 图 层 填充 前 景色 ， 效 果 如 图 7-56 所 示 。 

9 STEP 03 在 图 像 编辑 窗口 中 ， 按 Ctrl 十 R 组 合 键 调 出 标尺 ， 拖 动 横竖 两 根 参 考 线 ， 分 别 至 于 画布 水 平 居 
中 及 垂直 居中 位 置 ， 效 果 如 图 7-57 所 示 。 

9 STEP 04 在 “图 层 ” 面 板 下 方 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 2” 图 层 ， 选 取 工 具 箱 中 的 
椭圆 选 框 工具 ， 在 图 像 编 辑 窗 口中 的 参考 线 交 点 位 置 ， 按 住 Alt 十 Shift 组 合 键 的 同时 ， 在 参考 线 交 点 处 
按 住 鼠 标 左 键 拖 中 ， 绘 制 一 个 如 图 7-58 所 示 的 圆 形 选 框 。 


图 7-56 填充 前 图 7-57 添加 参考 图 7-58 ”绘制 圆 形 选 框 
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9 STEP 05 设置 前 景色 为 米 白色 ( RGB 参数 值 分 别 为 233、242、214 ) ， 为 圆 形 选 框 填充 前 景色 ， 效 果 
如 图 7-59 所 示 。 

9 STEP 06 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “路 径 ”， 在 图 像 编辑 
窗口 中 绘制 一 个 三 角形 ， 其 中 一 个 锚 点 在 圆心 ( 参考 线 的 交点 处 ) ， 效 果 如 图 7-60 所 示 。 

9 STEP 07 在 工具 属性 栏 中 单 击 “ 建 立 选区 ”按钮 ，@ 在 弹出 的 “建立 选区 ”对 话 框 中 设置 “羽化 半 
径 ” 为 0 像素 ; 四 选中 “消除 饮 齿 ” 单 选 按钮 ， 如 图 7-61 所 示 。 


添加 到 选区 (A) 
从 选区 中 减 去 (5S) 
与 选区 交叉 (人 


列 7-S9 ”填充 前 景色 图 7-60 ”绘制 三 角形 图 7-61 设置 各 选项 
9 STEP 08 单 击 “确定 ”按钮 ， 建 立 选区 ， 效 果 如 图 7-62 所 示 。 
9 STEP 09 按 Ctrl 十 Shift 十 I 组 合 键 ， 反 选 选区 ， 效 果 如 图 7-63 所 示 。 
e STEP 10 按 Ctrl 十 J 组 合 键 ， 复 制 出 反选 选区 内 容 ， 得 到 “图 层 3” 图 层 ， 如 图 7-64 所 示 。 


~ | 不 透明 度 : 100% ~ 


图 7-62 ”建立 选区 图 7-63 ”反选 选区 图 7-64 复制 反选 选区 
9 STEP 11 展开 “路 径 ” 面 板 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “工作 路 径 ” 缩 览 图 ， 调 出 选区 ， 
按 Ctrl 十 Shift 十 I 组 合 键 反 选 选区 ， 效 果 如 图 7-65 所 示 。 
9 STEP 12 展开 “图 层 ” 面 板 ， 选 中 “图 层 2” 图 层 ， 按 Delete 键 删除 与 “图 层 3” 重 又 的 部 分 ， 并 单 击 
“图 层 3” 图 层 左 侧 “ 指 示 图 层 可 见 性 ”按钮 ， 隐 藏 “图 层 3” 图 层 ， 效 果 如 图 7-66 所 示 。 
9 STEP 13 按 Ctrl 十 D 组 合 键 取 消 选区 ， 得 到 扇形 图 像 ， 在 “图 层 ” 面 板 中 删除 “图 层 3” 图 层 ， 并 将 


“图 层 2” 命 名 为 “扇形 ”， 效 果 如 图 7-67 所 示 。 
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图 7-65 反选 工作 路 径 选 区 图 7-66 ”删除 图 层 重 登 部 分 图 7-67 取消 选区 
9 STEP 14 选中 “扇形 ”图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “扇形 拷贝 ”图 层 ， 并 按 Ctrl 十 T 组 合 键 ， 
调 出 变换 控制 框 ， 将 图 像 旋转 中 心 点 拖 蝶 至 参考 线 交 点 处 ， 如 图 7-68 所 示 。 
9 STEP 15 在 工具 属性 栏 中 设置 “旋转 ”为 60 度 ， 并 按 Enter 键 确认 旋转 ， 效 果 如 图 7-69 所 示 。 
9 STEP 16 按 4 次 Shift 十 Ctrl 十 Alt 十 T 组 合 键 ， 重 复 上 一 步 操作 ， 得 到 “扇形 拷贝 2”“ 扇 形 拷贝 
3” “扇形 拷贝 4”“ 扇 形 拷贝 S$”4 个 图 层 ， 效 果 如 图 7-70 所 示 。 


图 7-68 拖 虽 旋转 中 心 点 图 7-69 ”旋转 图 像 图 7-70 ”重复 上 一 步 操作 
9 STEP 17 展开 “图 层 ” 面 板 ， 选 中 “扇形 ”图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “扇形 拷贝 6” 图 层 。 
按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “ 扇 形 拷贝 6” 图 层 左 侧 的 图 层 缩 览 图 ， 调 出 选区 ， 为 图 层 填充 
白色 ( RGB 参 数值 均 为 255)， 效 果 如 图 7-71 所 示 。 
9 STEP 18 选 中 “扇形 拷贝 6” 图 层 ， 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 将 图 像 旋 转 中 心 点 拖 电 
至 参考 线 交 点 处 ， 在 工具 属性 栏 中 设置 “旋转 ”为 30 度 ， 并 按 Enter 键 确认 旋转 ， 效 果 如 图 7-72 


所 示 。 

9 STEP 19 在 “图 层 ” 面板 中 ， 选 中 “扇形 拷贝 6' 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “扇形 找 贝 7 
图 层 。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 将 图 像 旋转 中 心 点 拖 忠 至 参考 线 交 点 处 ， 在 工具 属性 栏 中 
设置 “旋转 ”为 60 度 ， 并 按 Enter 键 确认 旋转 ， 效 果 如 图 7-73 所 示 。 
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图 7-71 复制 填充 图 像 图 7-72 ”旋转 图 像 图 7-73 复制 旋转 图 像 

9 STEP 20 按 4 次 Shift 十 Alt 二 Ctrl 十 IT 组合 键 ， 重 复 上 一 步 操 作 ， 得 到 “扇形 拷贝 8”“ 扇 形 拷贝 
9” “扇形 拷贝 10”“ 扇 形 拷贝 11”4 个 图 层 ， 效 果 如 图 7-74 所 示 。 

9 STEP 21 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
褐色 ( RGB 参数 值 分 别 为 168、66、0 ) 、“ 描 边 ” 为 无 ， 在 图 像 编辑 窗 口中 以 参考 线 交 点 为 圆心 ， 
按 住 Shift 十 Alt 组 合 键 的 同时 ， 向 外 拖 动 鼠标 绘制 一 个 圆 ， 得 到 “椭圆 1” 图 层 ， 效 果 如 图 7-75 
所 示 。 

9 STEP 22 在 “图 层 ” 面 板 中 ， 将 “椭圆 1” 图 层 拖 忠 至 “扇形 ”图 层 下 方 ， 效 果 如 图 7-76 所 示 。 


旋转 


图 7-74 ”重复 上 一 步 操作 图 7-75 绘制 圆 形 图 7-76 拖 灵 图 层 

9 STEP 23 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 深 
红色 ( RGB 参 数值 分 别 为 197、4、4 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 中 以 参考 线 交 点 为 圆心 ， 按 住 
Shift 十 Alt 组 合 键 的 同时 ， 向 外 拖 动 鼠标 绘制 一 个 圆 ， 得 到 “椭圆 2” 图 层 ， 效 果 如 图 7-77 所 示 。 

9 STEP 24 在 “图 层 ” 面 板 中 ， 选 中 “椭圆 2” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “椭圆 2 拷贝 ” 
层 ， 选 取 工 具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 将 “填充 ”设置 为 红色 ( RGB 参数 值 分 别 为 253、 
30、30 ) ， 效 果 如 图 7-78 所 示 。 

9 STEP 25 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 按 住 Shift 十 Alt 组 合 键 的 同时 缩放 图 像 ， 形 成 同心 圆 的 


效果 ， 如 图 7-79 所 示 。 
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图 7-77 绘制 圆 形 图 7-78 复制 图 层 更 改 填充 图 7-79 ”缩放 图 像 

9 STEP 26 在 “图 层 ” 面 板 中 ， 选 中 “椭圆 2 拷贝 ”图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “椭圆 2 拷贝 
2” 图 层 ， 选 取 工 具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 将 “填充 ”设置 为 深 红色 ( RGB 参 数值 分 别 为 
197、4、4 ) ， 效 果 如 图 7-80 所 示 。 

9 STEP 27 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 按 住 Shift 十 Alt 组 合 键 的 同时 ， 缩 放 图 像 ， 形 成 同心 贺 
的 效果 ， 如 图 7-81 所 示 。 

9 STEP 28 选取 工具 箱 中 的 多 边 形 工具 ， 在 工具 属性 栏 中 设置 “选取 工具 模式 ”为 “形状 ”、“ 填 充 ” 
为 深 红色 ( RGB 参 数值 分 别 为 197、4、4 ) 、“ 描 边 ” 为 无 、“ 边 ”为 3， 在 图 像 编辑 窗口 中 绘制 一 个 
三 角形 ， 得 到 “多 边 形 1” 图 层 ， 效 果 如 图 7-82 所 示 。 


图 7-80 复制 图 层 更 改 填 充 图 7-81 缩放 图 像 图 7-82 ”绘制 三 角形 

9 STEP 29 在 “图 层 ” 面 板 中 ， 选 中 “多 边 形 1” 图 层 ， 选 取 工 具 箱 中 的 直接 选择 工具 ， 拖 蝶 三 角形 图 
像 的 三 个 锚 点 至 合适 位 置 ， 并 按 Enter 键 确认 变形 ， 效 果 如 图 7-83 所 示 。 

9 STEP 30 在 “图 层 ” 面板 中 ， 选 中 “多 边 形 1” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “多 边 形 1 拷贝 ” 
图 层 ， 选 取 工 具 箱 中 的 多 边 形 工具 ， 在 工具 属性 栏 中 更 改 设置 “填充 ”为 红色 ( RGB 参数 值 分 别 为 
253、30、30 ) ， 效 果 如 图 7-84 所 示 。 

9 STEP 31 选择 “编辑 |“ 变换”|“ 水 平 翻转 ”命令 ， 水 平 翻转 图 像 ， 并 调整 图 像 至 合适 位 置 ， 效 果 
如 图 7-85 所 示 。 
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图 7-83 ”变形 图 像 图 7-84 复制 图 层 更 改 填充 图 7-85 ”翻转 图 像 
9 STEP 32 在 “图 层 ” 面板 中 ， 将 “多 边 形 1” 和“ 多边形 1 拷贝 ”图 层 拖 蝶 至 “椭圆 2 拷贝 ”图 层 下 
方 ， 效 果 如 图 7-86 所 示 。 
9 STEP 33 选取 工具 箱 中 的 横 排 文 字 工 具 ， 选 择 “ 窗 中 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 设置 
“字体 系列 ”为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 18 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 
字 距 调整 ”为 0、“ 颜 色 ” 为 黄色 ( RGB 参 数值 分 别 为 255、255、0 ) ， 如 图 7-87 所 示 。 
e@ STEP 34 输入 相应 文本 ， 调 整 至 合适 位 置 ， 并 移 除 参考 线 ， 效 果 如 图 7-88 所 示 。 


方正 综艺 简体 nD 中 | 


图 7-86 拖 引 图 层 图 7-87 设置 字符 选项 图 7-88 输入 文本 


7.2.2 ”设计 抽奖 活动 奖品 文子 信息 


抽奖 活动 最 吸引 消费 者 的 就 是 奖品 ， 奖 品 越 丰 厚 ， 对 消费 者 心理 的 影响 就 越 大 。 

下 面 详 细 介绍 设计 抽奖 活动 奖品 文字 信息 的 方法 。 其 操作 步 又 如 下 。 加 -Si 
9 STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 和 选择“ 窗口 ” |“ 字符” 个 令 ， 在 弹出 的 扫 码 看 视频 
"字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 7 点 、“ 行 距 ” 为 “自动 ” 、“ 设 
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置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 红色 ( RGB 参数 值 分 别 为 2355、0、0 ) ， 并 在 工具 属性 栏 中 
单 击 “ 居 中 对 齐 文本 ”按钮 ， 在 图 像 编 辑 窗口 中 输入 相应 文本 并 调整 至 合适 位 置 。 按 Ctrl 十 IT 组 合 键 ， 
调 出 变换 控制 框 ， 适 当 调 整 文本 角度 ， 效 果 如 图 7-89 所 示 。 

9 STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “ 手 机 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编辑 窗口 中 ， 
并 将 图 层 命名 为 “手机 ”， 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 、 位 置 及 角度 ， 效 
果 如 图 7-90 所 示 。 
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图 7-89 ”输入 并 调整 文本 图 7-90 拖 旭 并 调整 图 像 
9 STEP 03 根据 STEP01 中 设置 的 文字 属性 ， 在 图 像 编辑 窗口 中 输入 相应 文本 内 容 ， 并 适当 调整 文本 位 
置 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 文 本 角度 ， 效 果 如 图 7-91 所 示 。 
9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 尖 脸 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编辑 窗口 中 ， 
并 将 图 层 命名 为 “ 活 脸 ”。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 、 位 置 及 角度 ， 效 
果 如 图 7-92 所 示 。 


图 7-91 输入 并 调整 文本 图 7-92 拖 息 并 调整 图 像 
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9 STEP 05 根据 STEP01 中 设置 的 文字 属性 ， 在 图 像 编 辑 窗 口中 输入 相应 文本 内 容 ， 并 适当 调整 文本 位 
置 。 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 文本 角度 ， 效 果 如 图 7-93 所 示 。 

9 STEP 06 按 Ctrl 十 O 组 合 键 ， 打开“ 笔记 本 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 中 至 图 像 编辑 窗口 
中 ， 并 将 图 层 命名 为 “笔记 本 ”。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 、 位 置 及 角 
度 ， 效 果 如 图 7-94 所 示 。 
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图 7-93 ”输入 并 调整 文本 图 7-94 拖 慢 并 调整 图 像 
9 STEP 07 根据 STEP01 中 设置 的 文字 属性 ， 在 图 像 编辑 窗口 中 输入 相应 文本 内 容 ， 并 适当 调整 文本 位 
置 。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 文本 角度 ， 效 果 如 图 7-95 所 示 。 
9 STEP 08 按 Ctrl 十 O 组 合 键 ， 打 开 “ 积 分 金币 1.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编辑 窗 
口中 ， 并 将 图 层 命 名 为 “积分 金币 1”。 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 、 位 
置 及 角度 ， 效 果 如 图 7-96 所 示 。 
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图 7-95 ”输入 并 调整 文本 图 7-96 拖 旨 并 调整 图 像 
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9 STEP 09 根据 STEP01 中 设置 的 文字 属性 ， 在 图 像 编 辑 窗 口中 输入 相应 文本 内 容 ， 并 适当 调整 文本 位 
置 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 文本 角度 ， 效 果 如 图 7-97 所 示 。 

9 STEP 10 按 Ctrl 十 O 组 合 键 ， 打 开 “ 相 机 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编辑 窗口 中 ， 
并 将 图 层 命 名 为 “相机 ”。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 、 位 置 及 角度 ， 效 
果 如 图 7-98 所 示 。 


图 7-97 输入 并 调整 文本 图 7-98 拖 提 并 调整 图 像 
9 STEP 11 根据 STEP01 中 设置 的 文字 属性 ， 在 图 像 编 辑 窗 口中 输入 相应 文本 内 容 ， 并 适当 调整 文本 位 
置 。 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 文本 角度 ， 效 果 如 图 7-99 所 示 。 
9 STEP 12 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 折 “ 湛 脸 ” 图 层 所 对 应 的 图 像 至 合适 位 置 。 按 
Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 角 度 ， 效 果 如 图 7-100 所 示 。 


图 7-99 ”输入 并 调整 文本 图 7-100 拖 息 并 调整 图 像 
9 STEP 13 根据 STEP01 中 设置 的 文字 属性 ， 在 图 像 编 辑 窗口 中 输入 相应 文本 内 容 ， 并 适当 调整 文本 位 
置 。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 文本 角度 ， 效 果 如 图 7-101 所 示 。 
9 STEP 14 按 Ctrl 十 O 组 合 键 ， 打 开 “ 液 晶 电视 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 电 至 图 像 编 辑 窗口 


第 7 章 “活动 推广 :互动 投票 的 H5 广 告 设计 


中 ， 并 将 图 层 命 名 为 “液晶 电视 ”。 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 、 位 置 及 
角度 ， 效 果 如 图 7-102 所 示 。 


图 7-101 输入 并 调整 文本 图 7-102 拖 役 并 调整 图 像 
9 STEP 15 根据 STEP01 中 设置 的 文字 属性 ， 在 图 像 编辑 窗口 中 输入 相应 文本 内 容 ， 并 适当 调整 文本 位 
置 。 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 文本 角度 ， 效 果 如 图 7-103 所 示 。 
9 STEP 16 按 Ctrl 十 O 组 合 键 ， 打 开 “ 积 分 金币 3.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 中 至 图 像 编 辑 窗 
口中 ， 并 将 图 层 命名 为 “积分 金币 3”。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 、 位 
置 及 角度 ， 效 果 如 图 7-104 所 示 。 


图 7-103 ”输入 并 调整 文本 图 7-104 拖 旨 并 调整 图 像 
9 STEP 17 用 与 上 同样 的 方法 ， 在 图 像 编 辑 窗口 中 的 适当 位 置 输入 相应 文本 内 容 ， 插 入 相应 素材 图 像 ， 
并 分 别 命名 素材 图 像 图 层 的 名 称 ， 效 果 如 图 7-105 所 示 。 
9 STEP 18 将 本 小 节操 作 所 生成 的 图 层 进行 全 选编 组 ， 并 命名 为 “转盘 奖品 ”， 在 “图 层 ” 面 板 中 将 


“转盘 奖品 ”图 层 组 拖 抱 至 “椭圆 2” 图 层 下方 ， 效 果 如 图 7-106 所 示 。 
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图 7-105 重 腥 以 上 落 又 图 7-106 ”图 层 编组 


7.2.3 ”设计 抽奖 活动 页 面 表 饰 效 果 


在 设计 抽奖 活动 页 面 时 ， 适 当 融 入 一 些 喜 庆 元 素 ， 可 以 使 整个 页 面 与 主题 更 为 融 
洽 。 下 面 详 细 介绍 设计 抽奖 活动 页 面 装饰 效果 的 方法 。 其 操作 步骤 如 下 。 

e STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 烟 火 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 中 至 图 
像 编辑 窗口 中 适当 的 位 置 ， 并 将 图 层 命 名 为 “烟火 ”， 效 果 如 图 7-107 所 示 。 

9 STEP 02 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “窗口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 36 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 
的 字 距 调整 ”为 0、“ 颜 色 ” 为 黄色 ( RGB 参 数值 分 别 为 255、255、0 ) ， 在 图 像 编 辑 窗口 中 输入 相应 
文本 ， 调 整 至 合适 位 置 ， 效 果 如 图 7-108 所 示 。 


图 7-107 拖 吕 图像 图 7-108 输入 文本 
e STEP 03 在 制作 的 文本 内 容 中 ， 按 Enter 键 进行 换行 操作 ， 并 在 第 二 行文 本 前 多 次 按 空 格 键 ， 调 整 文本 
段 前 间距 ， 效 果 如 图 7-109 所 示 。 


第 7/ 章 ”活动 推广 : 互动 投票 的 HS 广告 设计 


9 STEP 04 在 “图 层 ” 面 板 中 ， 双 击 “ 幸 运 抽奖 ”文字 图 层 空白 处 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 ， 
@ 选 中 “外 发 光 ” 复 选 框 ， @ 设 置 “ 混 合 模式 ”为 “正常 ”、“ 不 透明 度 ” 为 79%、“ 杂 色 ” 为 0%、 
“发 光 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) 、“ 方 法 ”为 “柔和 和 ”、“ 扩 展 ” 为 0%、“ 大 小 ”为 191 
像素 、“ 范 围 ” 为 50%， 如 图 7-110 所 示 。 
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图 7-109 ”调整 文本 图 7-110 ”设置 图 层 样式 
9 STEP 05 单 击 “确定 ”按钮 ， 为 图 层 添加 外 发 光 样 式 ， 效 果 如 图 7-111 所 示 。 
9 STEP 06 按 Ctrl 十 O 组 合 键 ， 打开“ 灯笼 2.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 电 至 图 像 编 辑 窗口 中 
适当 的 位 置 ， 并 将 图 层 命名 为 “灯笼 2”， 效 果 如 图 7-112 所 示 。 
9 STEP 07 按 Ctrl 十 O 组 合 键 ， 打开“ 爆竹 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 抱 至 图 像 编辑 窗口 中 适 
当 的 位 置 ， 并 将 图 层 命名 为 “爆竹 ”。 按 Ctrl 十 IT 组 合 键 ， 适 当 调 整 图 像 大 小 ， 并 按 Enter 键 确认 调整 ， 
效果 如 图 7-113 所 示 。 


图 7-111 添加 外 发 光 样 式 图 7-112 ” 拖 旨 图 像 图 7-113 ” 拖 旨 并 调整 图 像 
9 STEP 08 按 Ctrl 十 O 组 合 键 ， 打 开 “ 花 简 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 电 至 图 像 编辑 窗口 中 适 
当 的 位 置 ， 并 将 图 层 命 名 为 “ 花 简 ”。 按 Ctrl 十 IT 组 合 键 ， 适 当 调整 图 像 大 小 ， 并 按 Enter 键 确认 调整 ， 
效果 如 图 7-114 所 示 。 
9 STEP 09 选取 工具 箱 中 的 圆 角 珑 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
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充 ” 为 黄色 ( RGB 参 数值 分 别 为 255、255、0 ) 、“ 描 边 ” 为 无 、“ 半 径 ” 为 100 像 素 ， 在 图 像 编辑 窗 
口中 适当 的 位 置 绘 制 一 个 圆 角 和 矩 形 ， 得 到 “ 圆 角 和 矩形 1” 图 层 ， 效 果 如 图 7-115 所 示 。 

9 STEP 10 在 图 像 编 辑 窗 口中 ， 按 住 Alt 十 Shift 组 合 键 ， 水 平抑 扣 “ 圆 角 和 矩 形 1” 图 层 所 对 应 的 图 像 至 合 
适 位 置 ， 复 制 得 到 “ 圆 角 德 形 1 拷贝 ”图 层 ， 效 果 如 图 7-116 所 示 。 


图 7-114 拖 息 并 调整 图 像 图 7-115 绘制 圆 角 矩形 图 7-116 ” 拖 旭 复制 图 像 
9 STEP 11 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 人 命令， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 16 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调 


整 ” 为 0、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 255、0、0 ) ， 在 图 像 编 辑 窗口 中 输入 相应 文本 ， 并 调 
整 至 合适 位 置 ， 效 果 如 图 7-117 所 示 。 

9 STEP 12 根据 STEP11 中 设置 的 文字 属性 ， 在 图 像 编辑 窗口 中 输入 相应 的 文本 内 容 ， 适 当 调 整 文本 位 
置 ， 效 果 如 图 7-118 所 示 。 

9 STEP 13 在 “字符 ”面板 中 ， 设置“ 字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 距 ” 为 “ 自 
动 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0 “颜色 ”为 黑色 ( RGB 参 数值 均 为 0 ) ， 在 图 像 编辑 窗口 中 
输入 相应 文本 ， 并 适当 调整 文本 位 置 ， 效 果 如 图 7-119 所 示 。 至 此 ， 完 成 抽奖 活动 H5 页 面 设计 。 
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图 7-117 设置 文本 属性 图 7-118 输入 文本 图 7-119 ”输入 并 调整 文本 
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有 5 大] 营销 活动 : 掌握 投票 活动 的 H5 页 面 设计 


投票 活动 是 营销 活动 的 一 种 形式 ， 在 用 户 参 与 投票 活动 的 时 候 ， 能 够 传递 出 品牌 的 信息 及 价值 ， 
进而 提升 品牌 影响 力 。 
本 实例 的 最 终 效果 如 图 7-120 所 示 。 


御 姐 ”女神 ! 投票 大 PK! 


活动 时 间 ， 2019/3/28-2019/6/28 
通过 以 选 姜 形式 举办 的 选拔 活动 
重新 沈 定 主 男女 捉 的 定义 


评选 出 品 貌 出 众 


效果 \ 第 7 章 \ 掌 握 投票 活动 H5 页 面 设 计 .psd、 掌 握 投 票 活动 HS 页 面 设 计 .jpg 


设计 活动 页 面 背 景 效果 时 ， 背 景 的 主 色调 要 与 活动 主题 相符 合 。 下 面 详细 介绍 设 
计 投 票 活动 背景 效果 的 方法 。 其 操作 步骤 如 下 。 回 幅 
9 STEP 01 选择 “文件 ” |“ 新 建 ” 人 命令， 弹出“ 新建 文档 ”对 话 框 ， 设 置 “名 称 ” 为 扫 码 看 视频 
“掌握 投票 活动 HS 页面 设计 ”、 “宽度 ” 人 “高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 像 素 
/英寸 、“ 颜 色 模 式 ” 为 .RGB 颜色 。 、“ 背 景 内 容 ” 为 “白色 ”， 如 图 7-121 所 示 ， 单 击 “ 创 建 ” 按 
钮 ， 新 建 一 个 空白 图 像 。 


图 7-121 设置 各 选项 
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9 STEP 02 展开 “图 层 ” 面 板 ， 在 面板 下 方 单 击 “创建 新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 设 置 
前 景色 为 档 色 ( RGB 参 数值 分 别 为 254、212、14 ) ， 为 图 层 填充 前 景色 ， 效 果 如 图 7-122 所 示 。 

9 STEP 03 在 图 像 编辑 窗口 中 ， 选 取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 
“形状 ”、 “填充 ”为 黄色 ( RGB 参 数值 为 255、255、0 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 中 按 住 
shift 键 的 同时 绘制 一 个 正 圆 形 ， 得 到 “椭圆 1” 图 层 ， 效 果 如 图 7-123 所 示 。 

9 STEP 04 在 图 像 编 辑 窗口 中 ， 使 用 移动 工具 拖 折 “椭圆 1” 图 层 对 应 的 图 像 至 合适 位 置 ， 并 在 “图 
层 ” 面 板 中 ， 设 置 图 层 的 “不 透明 度 ” 为 45%， 效 果 如 图 7-124 所 示 。 


图 7-122 ”填充 前 景色 图 7-123 ”绘制 正 圆 形 图 7-124 拖 慢 并 调整 不 透明 度 

9 STEP 05 在 “图 层 ” 面 板 中 ， 选 中 “椭圆 1” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “椭圆 1 拷贝 ”图 
层 。 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 圆 位 置 及 大 小 ， 效 果 如 图 7-125 所 示 。 

9 STEP 06 按 Ctrl 十 O 组 合 键 ， 打 开 “ 模 特 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 电 至 图 像 编 辑 窗口 中 的 
合适 位 置 ， 并 将 图 层 命名 为 “模特 ”。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适当 调整 图 像 大 小 ， 效 果 
如 图 7-126 所 示 。 

9 STEP 07 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
灰色 ( RGB 参 数值 分 别 为 235、233、234 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 如 图 7-127 所 
示 的 形状 ， 并 按 Enter 键 确认 绘制 得 到 “形状 1” 图 层 。 


图 7-125 复制 调整 图 像 图 7-126 拖 虽 图 像 图 7-127 绘制 形状 
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9 STEP 08 在 “图 层 ” 面 板 中 ， 选 中 “形状 1” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “形状 1 拷贝 ”图 
层 。 选 取 工 具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 将 “填充 ”更 改 为 白色 ( RGB 人 参数 值 均 为 235 ) ， 效 
果 如 图 7-128 所 示 。 

9 STEP 09 选取 工具 箱 中 的 直接 选择 工具 ， 在 图 像 编辑 窗口 中 选中 “形状 1 拷贝 ”图 层 所 对 应 的 图 像 ， 
拖 中 图像 两 侧 锚 点 分 别 至 合适 位 置 ， 效 果 如 图 7-129 所 示 。 


填充 


图 7-128 复制 更 改 填充 图 像 图 7-129 ” 拖 息 锚 点 


PA fe 设计 投票 活动 文子 信息 


投票 活动 的 文字 信息 要 表明 活动 时 间 、 活 动 内 容 等 重要 信息 。 下 面 详细 介绍 设计 
投票 活动 文字 信息 的 方法 。 其 操作 步骤 如 下 。 
e@e STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 和 选择“ 窗口 ”| “字符 ”命令 ， 在 弹出 的 
"字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 41.36 点 、“ 行 距 ” 为 “ 自 
动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 235 ) ， 如 图 7-130 所 示 。 
e STEP 02 输入 相应 适 位 置 ， 效 果 如 图 7-131 所 示 。 


图 7-130 设置 字符 选项 图 7-131 输入 文本 


Photoshop 


HH 广告 设计 


9 STEP 03 在 “图 层 ” 面 板 中 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “ 我 是 ”文字 图 层 左 侧 的 图 层 缩 览 
图 ， 调 出 选区 。 选 择 “ 选 择 ”|“ 修 改 ”|“ 扩 展 ” 命 令 ， 在 弹出 的 “扩展 选区 ”对话 框 中 ， 设置“ 扩展 
量 ” 为 15 像 素 ， 单 击 “ 确 定 ” 按 钮 扩展 选区 ， 效 果 如 图 7-132 所 示 。 

9 STEP 04 在 “图 层 ” 面板 下 方 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 2” 图 层 ， 设 置 前 景色 为 深 
褐色 ( RGB 人 参数 值 分 别 为 70、1、29 ) ， 为 选区 填充 前 景色 ， 并 将 “图 层 2” 图 层 拖 蝶 至 “我 是 ”文字 
图 层 下 方 ， 效 果 如 图 7-133 所 示 。 

9 STEP 05 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 50.58 点 、 
“行距 ”为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 深 橙 色 ( RGB 参 数值 为 255、 
156、0 ) ， 如 图 7-134 所 示 。 


a 
美国 英语 v aa | 平 骨 
图 7-132 扩展 选区 图 7-133 ”填充 选区 图 7-134 设置 字符 选项 

9 STEP 06 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 7-135 所 示 。 

9 STEP 07 在 “图 层 ” 面 板 中 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “女神 ”文字 图 层 左 侧 的 图 层 缩 览 
图 ， 调 出 选区 。 选 择 “ 选 择 ”|“ 修 改 ”|“ 扩 展 ” 命 令 ， 在 弹出 的 “扩展 选区 ”对 话 框 中 ， 设 置 “ 扩 展 
量 ” 为 20 像 素 ， 单 击 “确定 ” 按 钮 扩展 选区 ， 效 果 如 图 7-136 所 示 。 

9 STEP 08 在 “图 层 ” 面 板 下 方 单 击 “ 创 建新 图 层 ” 按 钮 ， 为 选区 填充 前 景色 ， 并 将 “图 层 3” 图 层 拖 
电 至 “女神 ”文字 图 层 下 方 ， 效 果 如 图 7-137 所 示 。 


图 7-135 输入 文本 图 7-136 扩展 选区 图 7-137 填充 选区 
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9 STEP 09 选区 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 Franklin Gothic 
Heavy、“ 字 体 大 小 ”为 36 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 
白色 ( RGB 参 数值 均 为 255 ) ， 如 图 7-138 所 示 。 

9 STEP 10 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 7-139 所 示 。 


美国 英语 v a 平 骨 
图 7-138 设置 字符 各 选项 图 7-139 ”输入 文本 
9 STEP 11 在 文字 工具 属性 栏 中 单 击 “创建 文字 变形 ”按钮 ， 在 弹出 的 “变形 文字 ”对 话 框 中 ， 人 @ 设 置 
“样式 ”为 “波浪 ”; 四 设置 “弯曲 ”为 +30%、 “水 平 扭曲 ”为 0、“ 垂 直 扭曲 ”为 0; 四 选中 “水 
平 ” 单 选 按钮 ， 如 图 7-140 所 示 。 
e@eSTEP 12 单 击 “确定 ”按钮 变形 文字 ， 效 果 如 图 7-141 所 示 。 


有 一 


一 一 一 一 


和 ww we ww em mm mm mm mm 是 


FF 


本 


图 7-140 ”设置 变形 文字 图 7-141 ”变形 文字 

9 STEP 13 用 与 上 同样 的 方法 ， 在 图 像 编辑 窗口 中 的 适当 位 置 输入 相应 文本 内 容 ， 并 创建 文字 变形 ， 效 
果 如 图 7-142 所 示 。 

9 STEP 14 选取 工具 箱 中 的 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 
为 深 褐色 ( RGB 参数 值 分 别 为 70、1、29 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形， 得 到 
“和 矩形 1” 图 层 ， 效 果 如 图 7-143 所 示 。 

9 STEP 15 选取 工具 箱 中 的 直接 选择 工具 ， 在 图 像 编辑 窗口 中 ， 选 中 “和 矩 形 1” 图 层 所 对 应 的 图 像 ， 用 
鼠标 左 键 拖 虹 图像 左 下 角 和 右 下 角 的 两 个 锁 点 分 别 至 合适 位 置 ， 效 果 如 图 7-144 所 示 。 


|| 
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图 7-142 输入 文本 并 变形 图 7-143 ”绘制 矩形 图 7-144 拖 瘟 锚 点 
9 STEP 16 选取 工具 箱 中 的 横 排 文字 工具 ， 和 选择“ 窗口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 
Oi 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 16 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字 符 的 字 


距 调 整 ” 为 0 “颜色 ”为 白色 ( RGB 参 数值 均 为 255 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 7-145 所 示 。 

9 STEP 17 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 7-146 所 示 。 

9 STEP 18 在 “字符 ”面板 中 ， 人 @ 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 距 ” 为 
“自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 深 褐色 ( RGB 参 数值 分 别 为 70、1、29 ) ; 
四 激活 仿 粗 体 图 标 ， 如 图 7-147 所 示 。 


女神 ! 投票 大 PK ! 
@ 激 活 F 工 
f cg 如 了 了 [人 | fi ot AzwT 
图 7-145 设置 字符 选项 图 7-146 输入 文本 图 7-147 设置 字符 选项 
9 STEP 19 输入 相应 文本 并 调整 至 合适 人 位置， 效果 如 图 7-148 所 示 。 
9 STEP 20 在 “字符 ”面板 中 ， 引 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 距 ” 为 


“16 点 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 黑色 ( RGB 参 数值 均 为 255 ) ; 从 激活 下 划 
线 图 标 ， 如 图 7-149 所 示 。 

9 STEP 21 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 7-150 所 示 。 

9 STEP 22 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
充 ” 为 红 褐 色 ( RGB 参 数值 分 别 为 197、50、40 ) 、“ 描 边 ”为 无 、“ 半 径 ” 为 100 像 素 ， 在 图 像 编辑 
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窗口 中 绘制 一 个 圆 角 和 矩 形 ， 得 到 “ 圆 角 和 矩形 1” 图 层 。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 
图 像 大 小 及 位 置 ， 效 果 如 图 7-151 所 示 。 

9 STEP 23 在 “图 层 ” 面 板 中 ， 选 中 “ 圆 角 和 矩形 1” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “ 圆 角 和 矩形 1 找 
贝 ” 图 层 。 选 取 工 具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 将 “填充 ”更 改 为 红色 ( RGB 参 数值 分 别 
为 226、74、63 ) ， 用 移动 工具 将 圆 角 矩形 调整 至 合适 位 置 ， 效 果 如 图 7-152 所 示 。 

9 STEP 24 在 图 像 编辑 窗口 中 ， 按 住 Alt 十 Shift 键 的 同时 ， 水 平 拖 忠 “ 圆 角 和 矩形 1 ”图 层 所 对 应 的 圆 角 答 
形 至 合适 位 置 ， 得 到 “ 圆 角 和 矩形 1 拷贝 2” 图 层 。 选 取 工 具 箱 中 的 圆 角 德 形 工具 ， 在 工具 属性 栏 中 将 

“填充 ”更 改 为 橙色 ( RGB 参 数值 为 254、212、14)， 效 果 如 图 7-153 所 示 。 


活动 时 间 : 2019/3/28-2019/6/28 
通过 以 选美 形式 举办 的 选 据 活 动 
重新 界定 宅男 女神 的 定义 
评选 出 品 雪 出 众 


女神 ! 投票 大 PK ! 御 姐 ”女神 ! 投票 大 PK ! 御 姐 ”女神 ! 投票 大 PK! 


活动 了 时间; 2019/3/28-2019/6/28 活动 时 间 : 2019/3/28-2019/6/28 活动 时 间 : 2019/3/28-20192L6/28 


通过 以 选美 形式 举办 的 选 据 活 动 
重新 界定 宅男 女神 的 定义 重新 界定 宅男 女神 的 mr 
评选 出 品 瑶 出众 评选 出 品 通 出众 评选 出 品 艇 出 众 
二 艺 妆 具 的 优质 女人 


绘制 填充 EE 
图 7-151 绘制 圆 角 和 珑 形 图 7-152 复制 更 改 填充 图 7-153 复制 更 改 填充 

e STEP 25 在 “图 层 ” 面 板 中 ， 选 中 “ 圆 角 和 矩形 1 拷贝 2” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “ 圆 
角 珑 形 1 拷贝 3” 图 层 。 选 取 工 具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 将 “填充 ”更 改 为 黄色 
( RGB 参 数值 分 别 为 255、255、0 ) ， 用 移动 工具 将 圆 角 和 矩形 调整 至 合适 位 置 ， 效 果 如 图 7-154 
所 示 。 

9 STEP 26 选取 工具 箱 中 的 横 排 文 字 工 具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 人 @ 设 
置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 14 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字 符 的 字 距 调 
整 ” 为 0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; 四 激活 仿 粗 体 图 标 ， 效 果 如 图 7-155$ 所 示 。 
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御 姐 ”女神 ! 投票 大 PK ! 


活动 时 间 : 2019/3/28-2019/6/28 


图 7-154 复制 更 改 填充 图 7-155 设置 字符 选项 
e STEP 27 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 7-156 所 示 。 
9 STEP 28 在 “字符 ”面板 中 ,设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 14 操 、“ 行 距 ” 为 “ 自 
动 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0 “颜色 ”为 深 褐色 (RGB 参数 值 分 别 为 70、1 1、29 ) ， 激 活 
仿 粗 体 图 标 ， 输 入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 7-157 所 示 。 


评选 出 品 魏 出 众 
智慧 与 才艺 兼 有 具 的 优质 女生 


图 7-156 输入 文本 图 7-157 输入 文本 


投票 ) 


7.3.3 信 计 动 总 缀 效果 


投票 活动 页 面 的 设计 ， 是 为 了 吸引 用 户 参 与 互动 ， 适 当 添 加 一 些 点 缀 效果 ， 可 以 
很 好 地 达到 目的 。 下 面 详细 介绍 设计 投票 活动 点 级 效果 的 方法 。 其 操作 步 又 如 下 。 
e STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 和 皇冠 1.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 电 至 “ 扫 码 看 视频 
图 像 编 辑 窗口 中 的 合适 位 置 ， 并 将 图 层 命 名 为 “皇冠 1”， 效 果 图 7-158 所 示 。 
9 STEP 02 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适当 调整 图 像 的 角度 、 大 小 及 位 置 ， 效 果 如 图 7-159 
所 示 。 


第 7 章 ， 活动 推广 ; 互动 投票 的 H5 广 告 设计 


9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打开“ 皇冠 2.psd” 素 材 图像 ， 用 移动 工具 将 图 像 拖 中 至 图 像 编辑 窗口 中 
的 合适 位 置 ， 并 将 图 层 命名 为 “皇冠 2”， 效 果 图 7-160 所 示 。 


御 姐 ”女神 ! 投票 大 PK! 


活动 时 间 : 2019/3/28-2019/6/28 


御 姐 ”女神 ! 投票 大 PK ! 御 姐 ”女神 ! 投票 大 PK'! 


活动 时 间 : 2019/3/28-2019/6/28 活动 时 间 : 2019/3/28-2019/6/28 
通过 以 选美 形式 举办 的 选拔 活动 通过 以 选美 形式 举办 的 选 找 活 动 

重新 灌 定 宅男 女神 的 定义 重新 界定 宅男 女神 的 定义 
评选 出 品 通 出 众 评议 出 sh 


通过 以 选美 形式 举办 的 选拔 活动 
重新 界定 宅男 女神 的 定义 
评选 出 品 艇 出 众 评选 出 品 魏 出 众 
矢 基 与 才艺 兼 具 的 优质 女生 先 正 与 才艺 兼 具 的 优质 女生 


图 7-158 ”导入 图 像 图 7-159 ”调整 图 像 图 7-160 ” 拖 息 图 像 

9 STEP 04 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 效 果 如 图 7-161 所 示 。 

9 STEP 05 在 “图 层 ” 面板 中 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “ 皇 冠 2” 图 层 左 侧 的 图 层 缩 览 
图 ， 调 出 选区 。 选 择 “ 选 择 ”|“ 修 改 ”| “扩展 ”命令 ， 在 弹出 的 “扩展 选区 ”对 话 框 中 ， 设 置 “扩展 
量 ” 为 5 像素 ， 选 择 “ 确 定 ” 按 钮 ， 为 图 层 扩展 选区 ， 效 果 图 7-162 所 示 。 

9 STEP 06 在 “图 层 ” 面 板 下 方 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 4” 图 层 ， 设 置 前 景色 为 深 
褐色 ( RGB 人 参数 值 分 别 为 70、1、29 ) ， 为 选区 填充 前 景色 ， 并 将 “图 层 4” 拖 电 至 “皇冠 2” 图 层 下 
方 ， 效 果 如 图 7-163 所 示 。 


调整 
御 姐 ”女神 ! 投票 大 PKk '! 
活动 时 间 : 2019/3/28-2019/6/28 活动 时 间 ; 2019/3/28-2019/6/28 
过 8 式 举 办 的 选拔 活 二 通过 以 选美 形式 举办 的 选 拨 活动 
重新 界定 宅男 女神 的 定义 重新 界定 宅男 女神 的 定义 
评选 出 品 瑶 出 众 评选 出 品 狐 出 众 

智 整 与 才艺 兼 县 的 优质 女生 智慧 与 才艺 兼 县 的 优质 女生 

图 7-161 调整 图 像 图 7-162 ”扩展 选区 图 7-163 ”填充 选区 


e STEP 07 按 Ctrl 十 O 组 合 键 ， 打 开 “ 人 物 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编辑 窗 口中 的 
合适 位 置 ， 并 将 图 层 命 名 为 “人 物 ”， 效 果 图 7-164 所 示 。 
eSTEP 08 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 大 小 及 人 位置， 效果 如 图 7-165 


所 示 。 


Photoshop 
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御 姐 由 女神 ! 投票 大 PK! 


活动 时 间 : 2019/3/28-2019/6/28 


御 如 女神 ! 投票 大 PK 
活 嫌 期] 2019/3/28-2019/6/28 


通过 以 选美 形式 举办 的 选拔 活动 
重新 界定 宝 男 女神 的 定义 
评选 出 品 殊 出 众 


通过 以 选美 形式 举办 的 选拔 活动 
重新 界定 宅男 女神 的 定义 
评选 出 总 授 出 众 


智慧 与 才艺 兼 具 的 优质 女生 智慧 与 才艺 兼 具 的 忧 质 女生 
ED a = 


图 7-164 导入 图 像 图 7-165 ”调整 图 像 
9 STEP 09 选取 工具 箱 中 的 自 定形 状 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
充 ” 为 黄色 ( RGB 人 参数 值 分 别 为 235、255、0)、“ 摘 边 ” 为 无 、“ 形 状 ” 为 “ 星 爆 ” ， 在 图 像 编 辑 窗 
口中 绘制 一 个 自 定形 状 ， 得 到 “形状 2” 图 层 ， 适 当 调 整 位 置 及 大 小 ， 效 果 如 图 7-166 所 示 。 
e@eSTEP 10 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 忠 “ 形 状 2” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 复 制 
得 到 “形状 2 拷贝 ”图 层 ， 效 果 如 图 7-167 所 示 。 至 此 ， 完 成 投票 活动 H5 页 面 设计 。 


御 姐 外 女神 ! 投票 大 PK! 
活动 时 间 : 2019/3/28-2019/6/28 


通过 以 选美 形式 举办 的 选 找 活 动 
重新 界定 宝 男 女神 的 定义 
评选 出 品 艇 出 众 


智慧 与 才艺 兼 具 的 优质 女生 
a 


图 7-166 绘制 自 定形 状 图 7-167 拖 息 复制 图 像 


随 着 互联 网 时 代 的 加 速 进 步 ， 各 大 互联 网 络 平台 ， 如 微 博 、 头 条 号 、 论 
公众 号 等 ， 已 经 成 为 信息 传播 的 主要 媒介 。 互 粉 增 粉 是 为 了 让 平台 影响 
力 加 大 ， 传 播 范围 更 广 。 本 章 主 要 介绍 互 粉 增 粉 类 HS 广告 设计 方法 。 


游戏 程序 和 车 握 小 游戏 的 HS 页 面 设计 
摄影 论坛 ， 笛 握 旅行 相册 的 H5 页 面 设计 
微 信 增 粉 ， 掌 握 口令 红包 的 H5 页 面 设计 


重新 出 发 
不 仅仅 只 4 是 从 心 


旅行 相册 


世界 那么 大 ， 一 起 走 走 看 


我 的 旅行 日 记 
ez 人 


行 至 江南 ， 所 到 之 处 
便 是 满 满 的 水 印象 


de t. 多 做 远 ， 舒畅 
必 EY sp R 上 1 AAS A 、 Pat A | 候 远 : 
人 用 区 RSS 没有 黄河 的 雄厚 ， 没 有 丽江 的 澄清 
0 AT， 0 es ER RS 
a pa a A \ » 只 是 节 共 地 独自 流 若 ， 深 远 荐 


Photoshop 


H5 广 告 设计 
游戏 程序 : 掌握 小 游戏 的 H5 页 面 设计 


小 游戏 是 互联 网 市 场 一 直 不 可 或 缺 的 一 项 设计 ， 尤 其 伴随 着 最 近 微 信 小 程序 的 兴起 ， 让 小 游戏 程 
序 的 开发 又 赢 来 了 第 二 春 。 
本 实例 的 最 终 效 果 如 图 8-1 所 示 。 


从 曙 出 发 ] |_ 挑战 好 友 | 从 电 出 发 ] |_ 抄 战 好 友 | 


图 8-1 实例 效果 


效果 文件 


8.1.1 设计 小 游戏 育 景 压 纹 效果 


小 游戏 的 开发 设计 ， 要 考虑 多 重 因素 ， 例 如 背景 效果 ， 就 得 根据 游戏 针对 的 不 同 
人 和 群 来 进行 设计 。 下 面 详 细 介绍 设计 小 游戏 背景 底 纹 效果 的 方法 。 其 操作 步骤 如 下 。 Et na 
9 STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 扫 码 看 视频 
“掌握 小 游戏 H5 页 面 设 计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 像 素 / 英 
寸 、“ 颜 色 模 式 ” 为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “和 白色 ”， 如 图 8-2 所 示 ; 全 单 击 “创建 ”按钮 ， 


新 建 一 个 空 三 图 像 。 


全 最 近 使 用 页 已 保存 | 照片 。 打印 ” 图 友和 括 阁 


让 我 们 开始 尝试 新 事物 吧 。 


图 8-2 设置 各 选项 


第 8 和 章 ” 互 粉 地 粉 : 洲 戏 红包 的 HD2 广 各 设计 


9 STEP 02 展开 “图 层 ” 面 板 ， 新 建 “ 图 层 1” 图 层 ， 设 置 前 景色 为 淡 青 色 ( RGB 参数 值 为 242、246、 
244 ) ， 为 “图 层 1” 图 层 填 充 淡 青 色 ， 效 果 如 图 8-3 所 示 。 

9 STEP 03 选择 “ 滤 镜 ”|“ 杂 色 ”|“ 添 加 杂 色 ”命令 ， 弹 出 “添加 杂 色 ”对 话 框 ， 设置“ 数量 ”为 
6.3%， 选 中 “高 斯 分 布 ” 单 选 按钮 和 “ 单 色 ” 复 选 框 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添 加 杂 色 ， 效 
果 如 图 8-4 所 示 。 


人 


图 8-3 ”填充 颜色 图 8-4 添加 杂 色 
e@e STEP 04 选择 “ 滤 镜 ” |“ 模糊”|“ 动 感 模糊 ”命令 ， 弹 出 “动感 模糊 ”对 话 框 ， 设 置 “角度 ”为 0 
度 、“ 距 离 ” 为 1725 像 素 ， 如 图 8-5 所 示 。 
9 STEP 05 单 击 “确定 ”按钮 ， 即 可 应 用 “动感 模糊 ” 滤 镜 ， 效 果 如 图 8-6 所 示 。 


添加 


( 坑 定 ) 
取消 


预览 (P) 


向 度 A: 加 ] 度 《一 


距离 (D): |1725 


图 8-5 设置 各 参数 图 8-6 添加 “动感 模糊 ” 滤 镜 


8.1.2 设计 小 游戏 界面 投 钮 效果 


小 游戏 界面 除了 背景 、 文 本 信息 外 ， 更 多 的 是 交互 设计 按钮 。 下 面 详细 介绍 制作 
小 游戏 界面 按钮 效果 的 方法 。 其 操作 步骤 如 下 。 Ds 
o STEP 01 选取 工具 箱 中 的 贺 角 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 * 为 ” 扫 码 看 视频 
“形状 ”、“ 填 充 ” 为 白色 ( RGB 参数 值 均 为 255 ) 、“ 描 边 ”为 黑色 、“ 像 素 ”为 2、“ 圆 角 半径 " 
为 20 像 素 ， 在 图 像 编辑 窗口 中 绘制 一 个 圆 角 矩 形 ， 得 到 “ 圆 角 矩 形 1” 图 层 ， 效 果 如 图 8-7 所 示 。 


Photoshop 


H5 广 告 设 计 


9 STEP 02 展开 “图 层 ” 面 板 ， 选 择 “ 圆 角 珑 形 1” 图 层 ， 栅 格 化 图 层 。 选 取 工 具 箱 中 的 橡皮 擦 工具， 
在 工具 属性 栏 中 设置 “模式 ”为 “画笔 ”、“ 大 小 ”为 125 像 素 、“ 硬 度 ” 为 100%、 “不 透明 度 ” 为 
100%、“ 流 量 ”为 100%、“ 平 滑 ” 为 0， 控 除 圆 角 矩 形 的 左上 角 ， 效 果 如 图 8-8 所 示 。 

9 STEP 03 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 位 置 及 大 小 ， 效 果 如 图 8-9 所 示 。 


图 8-7 绘制 圆 角 和 矩 形 图 8-8 ” 擦 除 图 像 图 8-9 调整 图 像 大 小 及 位 置 

9 STEP 04 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ” |“ 字符 ”命令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 9.2 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调 
整 ” 为 0、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ， 如 图 8-10 所 示 。 

e@e STEP 05 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 8-11 所 示 。 

9 STEP 06 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 ” 为 黑色 ( RGB 参 数值 均 为 0 ) 、“ 像 素 ” 为 0.5 点 ， 在 图 像 编 
辑 窗口 中 绘制 一 个 如 图 8-12 所 示 的 不 规则 图 形 ， 并 按 Enter 确 认 形 状 ; 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 
框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 8-12 所 示 。 


图 8-10 设置 各 选项 图 8-11 输入 文本 图 8-12 ”绘制 调整 不 规则 形状 
e@ STEP 07 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
黑色 ( RGB 人 参数 值 均 为 0 ) 、“ 描 边 ” 为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 如 图 8-13 所 示 的 不 规则 图 形 ， 
并 按 Enter 确 认 形 状 ， 得 到 “形状 2” 图 层 。 


巨 粉 增 粉 : 游戏 红包 的 H5 广 告 设计 


9 STEP 08 在 钢笔 工具 属性 栏 中 设置 “模式 ”为 “形状 ”、“ 填 充 ” 为 无 、“ 描 边 ”为 黑色 ( RGB 参数 
值 均 为 0 ) 、“ 像 素 ” 为 2， 在 图 像 编 辑 窗口 中 绘制 3 个 方向 的 线条 ， 并 按 Enter 键 确认 形状 ， 得 到 “ 形 
状 3”“ 形 状 4”“ 形 状 5”3 个 图 层 ， 效 果 如 图 8-14 所 示 。 

9 STEP 09 展开 “图 层 ” 面 板 ， 按 住 Shift 键 的 同时 ， 用 鼠标 左 键 单 击 “形状 2”“ 形 状 3”“ 形 状 
4”“ 形 状 $”4 个 图 层 ， 按 Ctrl 十 G 组 合 键 ， 将 所 选 图 层 编组 ， 命 名 为 “喇叭 ”图 层 。 并 按 Ctrl 十 IT 组 合 
键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 8-15 所 示 。 


图 8-13 ”绘制 不 规则 图 形 图 8-14 绘制 线条 图 8-15 ”调整 图 像 大 小 及 位 置 

9 STEP 10 选择 “ 圆 角 珑 形 1” 图 层 ， 按 住 Alt 键 的 同时 ， 用 鼠标 左 键 拖 动 所 选 图 层 至 合适 位 置 ， 复 制 得 
到 “ 圆 角 和 矩形 1 找 由 ”图 层 。 选 择 “ 圆 角 算 形 1 找 贝 ”图 层 ， 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 在 
图 像 编 辑 窗口 中 适当 调整 图 像 位 置 及 大 小 ， 效 果 如 图 8-16 所 示 。 

e STEP 11 选择 “ 圆 角 和 珑 形 1 找 贝 ”图 层 ， 按 住 Alt 键 的 同时 ， 用 鼠标 左 键 拖 动 所 选 图 层 至 图 层 上 方 ， 
复制 得 到 “ 圆 角 和 矩形 1 拷贝 2” 图 层 ， 选 择 “ 圆 角 珑 形 1 拷贝 2” 图 层 ， 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 
控制 框 ， 在 图 像 编 辑 窗口 中 适当 调整 图 像 位 置 及 大 小 ， 效 果 如 图 8-17 所 示 。 

9 STEP 12 按 住 Shift 键 的 同时 ， 用 鼠标 左 键 单 击 “ 圆 角 乱 形 1 拷贝 ”“ 圆 角 和 矩形 1 拷贝 2” 图 层 ， 按 住 
Alt 键 的 同时 ， 用 鼠标 左 键 拖 动 所 选 图 层 至 合适 位 置 ， 得 到 两 个 “ 圆 角 珑 形 1 拷贝 3” 图 层 ， 按 Ctrl 十 T 
组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 8-18 所 示 。 


图 8-16 复制 调整 图 像 图 8-17 复制 调整 图 像 图 8-18 复制 调整 图 像 
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e@e STEP 13 按 住 Shift 键 的 同时 ， 用 鼠标 左 键 单 击 两 个 “ 圆 角 甜 形 1 拷贝 3” 图 层 。 然 后 按 住 Alt 键 的 同 
时 ， 用 移动 工具 拖 忠 所 选 图 层 中 的 图 像 至 合适 位 置 ， 得 到 两 个 “ 圆 角 和 矩形 1 找 贝 4” 图 层 。 按 Ctrl 十 T 
组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 8-19 所 示 。 

e STEP 14 按 住 ctrl 键 的 同时 ， 单 击 “ 圆 角 珑 形 1 拷贝 2” 图 层 缩 览 图 ， 使 其 载 入 选区 ， 选 择 “ 编 
辑 ” |“ 填充 ”命令 ， 将 图 像 填充 为 浅 褐色 ( RGB 参 数值 分 别 为 212、209、209 ) ， 并 按 Ctrl 十 D 组 合 键 
取消 选区 ， 效 果 如 图 8-20 所 示 。 

9 STEP 15 按 住 Ctrl 键 的 同时 ， 单 击 “ 圆 角 和 矩形 1 拷贝 4” 图 层 右 侧 的 图 层 缩 览 图 ， 使 其 载 入 选区 ， 并 
填充 “颜色 ”为 红色 ( RGB 参 数值 分 别 为 255、0、0 ) ， 按 Ctrl 十 D 组 合 键 取消 选区 ， 效 果 如 图 8-21 
所 示 。 


图 8-19 复制 调整 图 像 图 8-20 填充 图 像 图 8-21 填充 图 像 

9 STEP 16 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 人 命令， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 11.65 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 
调整 ”为 0、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ， 如 图 8-22 所 示 。 

9 STEP 17 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 8-23 所 示 。 

9 STEP 18 选取 工具 箱 中 的 自 定义 形状 工具 ， 在 工具 属性 栏 中 设置 “模式 ”为 “形状 ”、“ 填 充 ” 为 红 
色 ( RGB 参 数值 分 别 为 255、0、0 ) 、“ 描 边 ” 为 无 、“ 形 状 ” 为 心 形 内 ， 在 图 像 编辑 窗 口中 绘制 一 
个 红色 爱心 ， 并 将 图 层 命名 为 “爱心 ”， 效 果 如 图 8-24 所 示 。 


| 从 健 出 发 | 
| 


绘制 


fierdt AaaT ls 


美国 英语 v aa | 平 骨 
图 8-22 设置 字符 选项 图 8-23 输入 文本 图 8-24 绘制 爱心 
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ET 在 Photoshop CC 2018 工 作 界面 中 ,使 用 自 定形 状 工具 [着 | 可 以 通过 设置 不 同 的 . 
3 委 吉 所 /形状 来 绘制 形 状 路 径 或 图 形 ， 在 ， We ee 


四 

外 SN 

四 
:mrvyarvyarvyarvyyryyrriyeryeryeryaryyryyrrirrinrynryervyervyyrryrryeryeryeryeryyrvyyrriyaryeriynryaryyryyrryrryaryeryeryeryyryyrryerynrynryaryyryyrrvyrryeryeryeryeryyrrvyrryeryariyarynryyryyrrvyeryeryeryeryyriyyrrvyrrvyeryeryaryeryyrrvrryeryervyeryeryyryyrryrrys 


e STEP 19 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 
置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 11.65 点 、“ 行 距 ” 为 “自动 ”、 ee 
调整 ”为 0、“ 颜 色 ” 为 黑色 ( RGB 参 数值 均 为 0 ) ， 如 图 8-25 所 示 。 


9 STEP 20 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 8-26 所 示 。 


| 从 喝 出 发 据 战 好 友 


输入 


fiedt Aaa 设 
美国 英语 vaa | 平 骨 
图 8-25 设置 字符 选项 图 8-26 输入 文本 
9 STEP 21 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 11.65 扣 、“ 行 距 ” 为 
“自动 ”、“ 设 置 所 选 字 符 的 字 距 调整 ”为 0、 “颜色 ”为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 8-27 所 示 。 


9 STEP 22 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 8-28 所 示 。 


在 Photoshop CC 2018 工 作 界 面 中 ，“ 字 符 ” 面 板 中 有 以 下 几 个 主要 的 属性 选项 。 


二 家 指点 ey 


”> 字体 大 小 :可 以 选择 字体 的 大 小 。 


| > 字 距 微调 : 用 来 调整 两 个 字符 之 间 的 距离 。 
“> 水 平 缩放 / 委 直 缩放 ， 水 平 缩放 用 于 调整 字符 宽度 ， 委 直 缩放 用 于 调整 字符 高 度 。 


| 从 嘱 出 发 | 挑战 好 友 | 
我 相 免 费 飞 


图 8-28 输入 文本 


图 8-27 设置 字符 选项 
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8.1.3 ”设计 小 游戏 素材 插件 效果 


小 游戏 界面 除了 背景 、 文 本 信息 以 及 交互 按钮 的 设计 外 ， 一 些 素材 图 像 插件 也 是 二 
提高 界面 设计 档次 的 关键 因素 。 下 面 详细 介绍 设计 小 游戏 素材 插件 效果 的 方法 。 其 操 回 Vb po; 
作 步 又 如 下 。 扫 码 看 视频 

9 STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “城堡 psd” 素材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 背景 图 像 编辑 窗口 
中 ， 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 8-29 所 示 。 

9 STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “ 飞 机 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 人 至 背景 图 像 编辑 窗口 
中 ， 得 到 “飞机 ”图 层 。 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 
图 8-30 所 示 。 

9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “飞龙 标志 .psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 中 至 背景 图 像 编辑 
窗口 中 。 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 效 果 如 图 8-31 所 示 。 


|_ 活 动 规则 | | 活动 规则 | 法 动 规则 | 


[从 贸 出 发 | 挑战 好 友 | 


图 8-29 导入 并 调整 图 像 i Eye pp 

e STEP 04 展开 “图 层 ” 面 板 ， 用 鼠标 左 键 双击 “飞机 ”图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 人 @@ 选 中 “ 投 
影 ” 复 选 框 ， 人 设置 “混合 模式 ”为 “正片 到 底 ”、“ 不 透明 度 ” 为 23%、“ 和 角度” 为 90 度 、“ 距 
离 ” 为 7 像素 、“ 扩 展 ” 为 15%、“ 大 小 ”为 3 像素 ， 如 图 8-32 所 示 。 

e STEP 05 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 图 层 样式 ， 效 果 如 图 8-33 所 示 。 

9 STEP 06 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ，@ 设 
置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 14.6 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 
调整 ”为 390、“ 颜 色 ” 为 深 红 色 ( RGB 参 数值 分 别 为 187、28、34 ) ; @ 输 入 相应 文本 ， 并 调整 至 合 
适 的 位 置 ， 效 果 如 图 8-34 所 示 。 

9 STEP 07 在 “字符 ”面板 中 ， 和 四 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 7.91 点 、“ 行 距 ” 
为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 深 红色 ( RGB 参 数值 分 别 为 187、28、 
34 ) ; 四 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 8-35 所 示 。 

9 STEP 08 在 “字符 ”面板 中 ， 和 四 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 16 点 、“ 行 距 ” 为 30 
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点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ; 四 输入 相应 文本 ， 并 
调整 至 合适 的 位 置 ， 效 果 如 图 8-36 所 示 。 至 此 ， 完 成 小 游戏 H5 页 面 设计 。 


样式 

3 区 读 

| 2 涡 会 模式 : | 正片 严 底 取消 
2 不 要 明度 (0]， “5 新 建 样式 {W)..。 ) 
有 a 50 ”| 度 回 使 用 全 局 光 (6) 预览 (V) 


下 高 (Dj: 万 


大 小 (3: 号 四 设置 


v 消除 乞 具 (D 
0 % 


图 层 挖 衬 投 加 (J) 
座 尘 为 扶 认 值 避 衬 为 野 认 值 


| 从 蓝 出 发 | 挑战 好 友 | 


2 


过 


和 图 8-3 


| 从 螂 出 发 | | 挑战 好 友 ] 


图 8-34 输入 文本 


上 摄影 论坛 : 掌握 旅行 相册 的 H5 页 面 设计 


摄影 论坛 是 摄影 爱好 者 发 布 目 己 的 原创 摄影 作品 的 一 个 平台 ， 每 位 爱好 者 都 希望 目 己 的 作品 能 
得 到 更 多 人 的 欣赏 ， 那 么 最 直接 的 方式 就 是 增长 粉丝 ， 而 一 个 好 的 旅行 相册 集 的 设计 就 是 吸引 路 人 转 
粉 的 关键 点 。 


Ibo 
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本 实例 最 终 效 果 如 图 8-37 所 示 。 


旅行 相册 


世界 那么 大 ， 


我 的 旅行 日 记 


世界 那么 大 ， 一 起 走 走 看 


我 的 旅行 日 记 


行 革 江南， 所 到 之 处 
全 是 泣 满 的 水 印象 
雍 运 ， 千 幅 
没有 黄河 的 雄厚 ， 没 有 邢 江 的 澄清 


只 是 静 静 地 独自 流 着 ， 深 二 着 只 是 荫 静 地 独自 请 着 ， 译 远 着 


图 8-37 ”实例 效果 
素材 文件 | 素材 \ 第 8 章 \ 旅 行 照 片 .psd 
效果 文件 | 效果 \ 第 8 章 \ 掌 握 旅 行 相册 HH5 页 面 设计 .psd、 掌 握 旅行 相册 H5 页 面 设计 .jpg 


8.2.1 设计 旅行 相册 和 颗 粒 育 景 效果 


旅行 相册 设计 的 重点 在 于 突出 主题 照片 ， 不 能 用 过 多 的 修饰 掩盖 掉 主题 的 吸引 
力 。 下 面 详细 介绍 设计 旅行 相册 颗粒 背景 效果 的 方法 。 其 操作 步骤 如 下 。 回 闷 
© STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 扫 码 着 视频 
为 “掌握 旅行 相册 H5 页 面 设计 ”、 0 ee “高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 像 
素 / 英 寸 、“ 颜 色 模 式 ” 为 “RGB 颜 色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 8-38 所 示 ; 人 @ 单 击 “ 创 建 
按钮 ， 新 建 一 个 空白 图 像 。 


和 白 定 
500x 500 像 来 己 300 


9 STEP 02 展开 “图 层 ” 面板 ， 新 建 “ 图 层 1” 图 层 ， 设 置 前 景色 为 淡 黄 色 ( RGB 参 数值 为 255、250、 
240 ) ， 为 “图 层 1” 图 层 填充 淡 黄色 ， 0 

9 STEP 03 选择 “ 滤 镜 ”|“ 杂 色 ”|“ 添 加 杂 色 ”命令 ， 弹 出 “添加 杂 色 ”对 话 框 ， 设置 “数量 ”》 
6.3%， 选 中 “高 斯 分 布 ” 单 选 按钮 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添加 杂 色 ， 效 果 如 图 8-40 所 示 。 
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填充 


图 8-39 填充 颜色 图 8-40 添加 杂 色 


Te 在 Photoshop 中 新 建 图 层 的 方式 有 很 多 ， 以 下 列举 了 4 种 常用 的 方法 。 : 
指点) ， 裕 组 ， 单 击 “ 图 层 "” 面板 度 部 的 “创建 新 间 层 ” 接 钥 ， 即 可 新 建 图 县。 : 
:> 快捷 键 : 按 Ctrl 十 J 组 合 键 ， 即 可 快速 复制 选中 的 图 层 ， 得 到 一 个 新 图 层 。 
:> 运用 “通过 拷贝 的 图 层 ” 命 令 : 如 果 在 图 像 中 创建 了 选区 ， 则 可 以 在 选区 内 单 击 鼠标 右键 ， 在 弹出 的 
。 快捷 菜单 中 选择 “通过 拷贝 的 图 层 ”命令 ， 即 可 将 选区 内 的 图 像 复 制 到 一 个 新 的 图 层 中 。 
:> 运用 “通过 剪 切 的 图 层 ” 命 令 : 在 图 像 中 创建 了 选区 后 ， 可 以 在 选区 内 单 击 鼠 标 右键 ， 在 弹出 的 快 : 

。。 捷 业 单 中 选择 “通过 剪 切 的 图 层 ”命令 ， 即 可 将 选区 内 的 图 像 剪 切 到 一 个 新 的 图 层 中 。 


8.2.2 ”设计 旅行 相册 文子 信息 效果 


旅行 相册 的 文字 信息 ， 可 以 是 时 间 、 地 点 、 人 物 介绍 ， 也 可 以 是 自己 对 旅行 中 所 
见 所 闻 所 的 感慨 。 下 面 详细 介绍 设计 旅行 相册 文字 信息 效 末 的 方法 。 其 操作 步骤 如 下 。 ” 回 性 
9 STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 站 码 看 视 区 
“字符 ”面板 中 ， 设 置 “字体 系列 ”为 “时 根 友 毛笔 行书 2.0 版 ”、“ 字 体 大 小 ”为 30 点 、“ 行 距 ” 为 
22.03、“ 设 置 所 选 字符 的 字 距 调整 ”为 930、“ 颜 色 ” 为 暗 蓝 色 ee 101、183 ) ， 如 图 
8-41 所 示 。 
© STEP 02 输入 相应 文本 并 调整 至 合 适 位 置 ， 效 果 如 图 8-42 所 未。 


在 Photoshop CC 2018 工 作 界面 中 ， 文字 的 属性 主要 是 在 “字符 ” 面板 中 进行 
;专家 指点 专家 指点 ) 放 包括 字体 、 字 体 大 小 、 字 符 间 距 和 文字 倾斜 等 属性 。 : 


© STEP 03 在 “字符 ” 面板 中 ， 设置 “字体 系列 ”为 “宋体 ”、“ 字 体 大 小 为 10 点 、 4 为 22.03 操 、 
“设置 所 选 字 符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参 数值 分 别 为 0、101、183 ) ， 如 图 8-43 所 示 。 
e STEP 04 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 8-44 所 示 。 
9 STEP 05 在 “字符 ”面板 中 ,设置 “字体 系列 ”为 “宋体 ”、“ 字 体 大 小 ”为 10 操 、“ 行 距 ” 为 “ 自 
动 、“ 设 置 所 选 字符 的 字 距 调整 ”为 50、“ 颜 色 ” 为 上 暗 蓝 色 ( RGB 参数 值 分 别 为 0(、101、183 ) ， 


如 图 8-45 所 示 。 


e STEP 06 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 8-46 所 示 。 
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图 8-41 设置 字符 选项 图 8-42 输入 文本 图 8-43 ”设置 字符 选项 


图 8-44 输入 文本 图 8-45 ”设置 字符 选项 图 8-46 输入 文本 
9 STEP 07 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 16 点 、“ 行 跑 ” 为 22.03 
点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 30、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 8-47 所 示 。 
9 STEP 08 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 8-48 所 示 。 


LL 


fi edit ”4 
美国 英语 v sa | 锐利 
图 8-47 设置 字符 选项 图 8-48 输入 文本 


8.2.3 仿 计 版 行 相 册 照 片 交 饰 效果 


旅行 相册 的 设计 与 制作 ， 是 与 照片 分 不 开 的， 作为 设计 页 面 的 照片 ， 一 定 要 突出 “ 风 和 8 国 和 
这 次 旅行 的 主题 ， 并 且 能 够 与 页 面相 互 映衬 ， 从 而 提升 整个 页 面 的 视觉 效果 。 下 面 详 加 矶 类 尘 
细 介 绍 制作 旅行 相册 照片 装饰 效果 的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 
e STEP 01 选取 工具 箱 中 的 矩形 工具 ， 在 属性 工具 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
浅 蓝 色 ( RGB 参数 值 分 别 为 126、206、244 ) 、“ 摘 边 ” 为 白色 ( RGB 参 数值 均 为 255 ) 、 “像素 ”为 
1， 在 图 像 编辑 窗口 中 绘制 一 个 和 矩形， 得 到 “和 矩形 1” 图 层 ， 效 果 如 图 8-49 所 示 。 
e STEP 02 展开 “图 层 ” 面板， 选择 “和 矩形 1” 图 层 ， 选 择 “窗口 ”|“ 属 性 ”命令 ， 调 出 “实时 形状 属 
性 ”面板 ， 在 面板 中 将 “和 珑 形 1” 图 层 4 个 角 的 半径 均 设 为 83 像 素 ， 效 果 如 图 8-50 所 示 。 


我 的 旅行 日 记 
行 至 江南 ， 所 到 之 处 行 到 江南， 所 到 之 处 
伍 是 满 泣 的 水 印象 便 是 泣 满 的 水 印象 
悠远 ， 舒 畅 父 运 ， 舒 畅 
没有 黄河 的 雄厚 ， 没 有 击 江 的 澄清 没有 黄河 的 雄厚 ， 没 有 明江 的 澄清 
! 是 静 静 地 独自 流 着 ， 深 运 着 内 是 静 靛 地 独自 流 着 ， 深 运 着 


图 8-49 ”绘制 矩形 图 8-50 ”调整 图 像 
9 STEP 03 在 “图 层 ” 面板 中 ， 双 击 “ 窍 形 1” 图 层 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 ， 人 @ 选 中 “ 投 
影 ” 复 选 框 ; 外 设置 “混合 模式 ”为 “正片 琶 底 ”、 “不 透明 度 ” 为 32%、 “角度 ”为 120 度 、“ 距 
离 ” 为 12 像 素 、“ 扩 展 ” 为 8%， 如 图 8-51 所 示 。 
9 STEP 04 单 击 “ 确 定 ” 按 钮 应 用 图 层 样 式 ， 效 果 如 图 8-52 所 示 。 


| i 浸 全 槛 式 :| 正片 又 底 加 | 取消 
车 线 下 透明 度 (0): 一 国 |]% 新建 样式 W 
] 纺 时 Re: ) 120 ”| 庶 回 他 用 全 局 光 (G) 预览 (V) 
摘 凡 由 SEO): 地 12 | 个 索 
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过 
| 
ue 
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旅行 相册 


世界 那么 大 ， 一 起 走 走 看 


等 宫 堵 : v [| 消除 t 点 (D 
未 名 (N): 伺 | 听 


图 层 控 空投 影 (O) 


1 1 
1 1 
1 1 
1 1 
1 1 
1 1 
1 1 
1 1 
1 1 
1 扩展 (R): 本 3 驱 1 
1 1 
内 发 光 1 大 小 (S): OO oD 像素 1 
1 1 
JJ 泡 I 吕 顾 1 
1 1 
— 1 1 
1 1 
| Ee 1 1 
1 1 
1 1 
| . 我 的 旅行 日 记 


| 
行 至 江南 ， 所 到 之 处 
便 是 滴 满 的 水 印象 
悠 运 ， 舒 畅 
7 开 没有 黄河 的 纵 原 ， 设 有 明江 的 洛 清 
四 设置 只 是 静 静 地 独自 流 着 ， 深 远 着 


图 8-51 设置 各 参数 图 8-52 ”应 用 图 层 样 式 


Photoshop 
HD 广 告 设 计 


9 STEP 05 按 Ctrl 十 O 组 合 键 ， 打 开 “ 旅 行 照 片 psd” 素 材 ， 用 移动 工具 将 图 像 拖 电 至 图 像 编 辑 窗口 中 适 


当 的 位 置 ， 并 将 图 层 命名 为 “旅行 照片 ”， 效 果 如 图 8-53 所 示 。 
© STEP 06 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 8-54 所 示 。 


pap 


旅行 相册 


世界 那么 大 ， 一 起 走 走 看 


我 的 旅行 日 记 


行 至 江南 ， 所 到 之 
使 是 RS 
悠远 ， 知 畅 
没有 黄河 的 维 厚 ， 没 有 天 江 的 汪清 
内 是 静 静 地 独自 流 着 ， 深 远 着 


图 8-53 ” 拖 息 图 像 
e STEP 07 展开 “图 层 ” 和 面板， 选择 “旅行 


按钮 ， 为 图 层 添 加 一 个 蒙 版 ， 效 果 如 图 8-55 所 示 。 
9 STEP 08 将 “前 景色 ”设置 为 “黑色 ” ( RGB 参 数值 均 为 0)， 
照片 ”图 层 新 建 的 图 层 蒙 版 缩 览 图 ， 选 取 工 具 箱 中 的 渐变 工具 ， 选 择 前 景 


值 均 为 255 ) ， 单 击 “旅行 


旅行 相册 


世界 那么 大 ， 一 起 走 走 看 


我 的 旅行 日 记 


行 至 江南 ， 所 到 之 处 
便 是 满 满 的 水 印象 
悠远 ， 舍 屿 


没有 黄河 的 纵 厚 ， 没 有 末 江 的 澄清 


内 是 静 静 地 独自 流 着 深远 着 


图 8-54 调整 图 像 


行 照片 ”图 层 ， 在 “图 层 ” 面 板 下 方 ， 单 击 “ 添 加 矢量 蒙 版 ” 


景色 ”设置 为 “白色 ” ( RGB 人 参数 


色 到 青 景色 的 渐变 。 在 图 像 编 辑 窗 口中 ， 将 潮 变 从 下 方 拖 描 至 上 方 ， 为 蒙 人 版 添加 渐变 ， 效 果 如 图 8-56 


所 示 。 至 此 ， 完成 旅行 了 相册 H5 页 面 设计 。 


Sa 2018 工 作 界面 中 ， 蒙 版 突出 的 作用 就 是 屏蔽 ， 无 论 是 什么 样 


专家 指点 ) 
ss 的 莹 版 ， 都 可 以 对 图 像 的 某 些 区 域 起 到 屏 项 作用 。 : 


| 加 屋 路 径 ”通道 

mr i 
v| 不 委 明 度 : 100% | ~ 
谈 E: 图 中 共 自 填 冯 :100% ~ 


@ 工 我 的 旅行 日 记 


e | 1 ke 


人 @@ 效果 
© 投影 


@@ 工行 至 江南 ,所 到 之 处 便 ... 
”本 世界 那么 大 ,一 起 走 走 看 
@@ ”了 旅行 相册 
c 交 OO 和 DO 个 
图 8-55 ”添加 蒙 版 


旅行 相册 


世界 那么 大 ， 一 起 走 走 看 


我 的 旅行 日 记 


行 至 江南 ， 所 到 之 处 
便 是 满 满 的 水 印象 
悠远 ， 舒 畅 
没有 黄河 的 维 厚 ， 没 有 表 江 的 洪 清 
内 是 稻 静 地 独自 流 着 ， 深 远 着 


图 8-56 绘制 蒙 版 渐变 


闻 戏 红包 的 H5 广 告 


设计 


第 8 章 “” 互 粉 增 粉 : 


里 有 素 】 微 信 增 粉 ; 掌握 口令 红包 的 H5 页 面 设计 


微 信 平 台 己 经 成 为 很 多 大 咖 、 网 红 以 及 微 商 传播 信息 的 媒介 ， 在 固有 的 粉丝 群体 上 ， 如 何 实现 快 
速 增 粉 ， 就 是 本 节 要 学 习 的 : 利用 微 信 口 令 红包 实现 快速 增 粉 。 
本 实例 的 最 终 效果 如 图 8-57 所 示 。 


图 8-57 ”实例 效果 


素材 文件 | 素材 \ 第 8 章 \ 手 机 界面 jpg 


效果 文件 | 效果 \ 第 8 章 \ 掌 握 口 令 红 包 H5 页 面 设计 .psd、 掌 握 口 令 红 包 H5 页 面 设计 jpg 


8.3.1 设计 口令 红包 页 面 效 果 


口令 红包 的 设计 风格 ， 是 用 红 、 黄 两 种 暖色 来 表达 群众 抢 红包 时 的 热烈 、 兴 奋 之 
情 。 下 面 详 细 介 绍 设计 口 令 红 包 页 面 效果 的 方法 。 其 操作 步骤 如 下 。 Ort me: 
9 STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 扫 码 看 视频 
为 “掌握 口令 红包 H5 页 面 设计 ”、 “宽度 ” “高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 像 
素 / 英 寸 、“ 颜 色 模 式 ” 为 “RGB 颜 色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 8-58 所 示 ; 人 @ 单 击 “ 创 建 
按钮 ， 新 建 一 个 空白 图 像 。 


(0 师 近 使用 项 已 保存 照片 打印 EE 


图 8-58 ”设置 各 选项 


{i 


Photoshop 
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9 STEP 02 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
充 ” 为 红色 ( RGB 参 数值 为 分 别 253、0、0 ) 、“ 摘 边 ” 为 无 、“ 半 径 ” 为 10 像 素 ， 在 图 像 编辑 窗口 
中 绘制 一 个 圆 角 矩形 ， 并 在 属性 栏 中 修改 “W” 为 938 像 素 、“H"” 为 1250 像 素 ， 效 果 如 图 8-59 所 示 。 

@ STEP 03 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
红色 ( RGB 参 数值 为 253、0、0 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 如 图 8-60 所 示 的 形状 。 


绘制 


图 8-59 ”绘制 圆 角 矮 形 图 8-60 ”绘制 形状 


在 Photoshop CC 2018 工 作 界 面 中 ， 钢 笔 工具 [大 | 可 以 创建 直线 和 平滑 流畅 的 曲 
线 ， 形 状 的 轮廓 称 为 路 径 ， 通 过 编辑 路 径 的 错 点 ， 可 以 很 方便 地 改变 路 径 的 形状 。 


9 STEP 04 按 Enter 键 确定 形状 绘制 ， 得 到 “形状 1” 图 层 。 
9 STEP 05 展开 “图 层 ” 面 板 ， 双 而“ 形状 1” 图 层 ， 弹 出 “图 层 样 式 ” 对 话 框 ，@ 选 中 “投影 ” 复 选 
框 ; 人 设置 “混合 模式 ”为 “正片 苔 底 ”、“ 投 影 颜色 ”为 “黑色 ” ( RGB 参数 值 均 为 0 ) 、“ 不 透 
明度 ”为 15%、“ 和 角度” 为 90 度 、“ 距 离 ” 为 11 像 素 、“ 扩 展 ” 为 100%、“ 大 小 ”为 3 像素 ， 如 


图 8-61 所 示 。 
e STEP 06 单 击 “ 确 定 ” 按 钮 即 可 应 用 图 层 样 式 ， 效 果 如 图 8-62 所 示 。 


Uo ee ee ee ee ee ee 


1 漠 洽 模 汪 :正片 亚 底 I 
! 不 要 明 大 (0): [5 1 (新建 样式 (W).… 
重度 (A):| ， | 90 度 回 使 用 全 局 光 (G) I 预览 (Y) 
一 
8 又 (D): 五 1LL_ | 像素 
扩展 {R): I100 | 色 
大 小 (5): 本 3 舍 志 


~ [| 消 际 锯齿 (L) 


| 


图 8-61 设置 图 层 样式 图 8-62 应 用 图 层 样 式 


第 8 章 ， 互 粉 增 粉 ; 游戏 红包 的 H5 广 告 设计 


9 STEP 07 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ”为 亮 黄 色 ( RGB 参 
数值 分 别 为 255、255、0 ) 、“ 描 边 宽度 ”为 10 像 素 ， 在 图 像 编辑 窗口 中 绘制 一 个 正 圆 ， 得 到 “椭圆 
1” 图 层 ， 效 果 如 图 8-63 所 示 。 

9 STEP 08 复制 “椭圆 1” 图 层 ， 得 到 “椭圆 1 拷贝 ”图 层 ， 适 当 调 整 其 大 小 ， 并 在 “属性 ”面板 中 ， 
设置 “填充 ”为 暗 黄色 ( RGB 参 数值 分 别 为 251、218、47 ) 、“ 描 边 ” 为 无 ， 效 果 如 图 8-64 所 示 。 


图 8-63 ”绘制 正 圆 图 8-64 复制 调整 图 像 
e@e STEP 09 双击 “椭圆 1 拷贝 ”图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 人 四 选中 “和 斜面 和 浮雕 ” 复 选 框 ; 四 设 
置 “样式 ”为 “内 和 斜面 ”、“ 方 法 ”为 平滑 、“ 深 度 ” 为 100%、 “方向 ”为 “上 ”、“ 大 小 ”为 5 像 
素 、“ 角 度 ” 为 90 度 、“ 高 度 ” 为 32 度 、 “高光 模式 ”为 “ 滤 色 ”、“ 不 透明 度 ” 为 90%、 “阴影 模 
式 ” 为 “正片 又 底 ”、“ 阴 影 颜 色 ” 为 暗 黄 色 ( RGB 参 数值 分 别 为 251、218、47 ) 、“ 不 透明 度 ” 为 
50%， 如 图 8-65 所 示 。 
e STEP 10 单 击 “ 确 定 ” 按 钮 即 可 添加 图 层 样式 ， 效 果 如 图 8-66 所 示 。 


-到 及 卫 -) 这 里 介绍 儿 种 与 创建 类 国 选 框 有 关 的 技巧 : 按 Shift-+M 组 合 刍 ， 可 快 训 选择 术 : 
圆 选 框 工具 ; 按 Shift 键 ， 可 创建 正 圆 选区 ; 按 Alt 键 ,可 创建 以 起 点 为 中 心 的 椭圆 : 
: 选区 ; 按 Alt 十 Shift 组 合 键 ， 可 创建 以 起 点 为 中 心 的 正 圆 选 区 。 : 


新 建 样式 (W)..。 ] 
预览 (Y) 


角度 (Nk /下 0 度 
【| 回 请 用 全 局 光 (6) 
高 度 : 一 32 度 


1 。 光 尝 等 高 线 : - 口 消除 锯 占 (D 
高光 楼 式 : | : 
1 ”不 ] 笃 明度 (0X 
阴影 楼 式 : 
|】 ”不 表明 度 (Cc) 
设置 为 球 认 值 | 复位 为 里 议 信 


图 8-65 ”设置 图 层 样式 图 8-66 添加 图 层 样 式 
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9 STEP 11 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 征 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 
大 小 ”为 43.78、“ 行 距 ” 为 68.39、“ 颜 色 ” 为 亮 黄色 ( RGB 参 数值 分 别 为 255、255、0 ) 、“ 字 距 ” 为 
50; 四 激活 仿 粗 体 图 标 ; 四 在 图 像 编 辑 窗口 中 输入 文字 ， 适 当 调 整 图 像 位 置 ， 效 果 如 图 8-67 所 示 。 

© STEP 12 单 击 “图 层 ” 面 板 底 部 的 “添加 图 层 样 式 ” 按 钮 ， 并 在 弹出 的 列表 框 中 选择 “投影 ”选项 ， 
打开 “图 层 样式 ”对 话 框 ， 设 置 “ 混 合 模式 ”为 “正片 到 底 ”、“ 阴 影 颜 色 ” 为 黑色 ( RGB 参数 值 均 
为 0 ) 、“ 不 透明 度 ” 为 46%、“ 角 度 ” 为 909、“ 距 离 ” 为 10 像 素 、“ 扩 展 ” 为 0、“ 大 小 ”为 2 像素 ， 
单 击 “ 确 定 ” 按 钮 即 可 添加 图 层 样 式 ， 效 果 如 图 8-68 所 示 。 


图 8-67 输入 文本 图 8-68 添加 图 层 样式 


8.3.2 ”设计 口令 红包 投 钮 效果 


口令 红包 的 按钮 设计 ， 是 为 了 告诉 人 们 下 一 步 应 该 做 什么 。 下 面 详细 介绍 设计 口 Ss 


令 红包 按钮 效果 的 方法 。 其 操作 步骤 如 下 。 口 局 
9 STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 “字符 ” 扫 码 看 视频 


面板 中 ， 人 设置 “字体 系列 ”为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 ”为 10.79 点 、“ 行 距 ” 为 16.86 
点 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 -200、“ 颜 色 ” 为 亮 黄 色 ( RGB 参 数值 分 别 为 255、255、0 ) ， 


从 激活 仿 粗 体 图 标 ， 如 图 8-69 所 示 。 

9 STEP 02 输入 相应 文本 并 适当 调整 位 置 ， 效 果 如 图 8-70 所 示 。 

e STEP 03 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ”为 亮 黄色 ( RGB 参数 
值 分 别 为 255、255、0 ) 、“ 描 边 宽度 ”为 2 像素 ， 在 图 像 编 辑 窗 口中 绘制 一 个 正 圆 ， 如 图 8-71 所 示 。 

9 STEP 04 展开 “图 层 ” 面 板 ， 复 制 “ 令 ”文字 图 层 ， 得 到 “ 令 拷贝 ”文字 图 层 ， 在 文字 属性 栏 中 设置 
“字体 大 小 ”为 7.7 点 ， 用 移动 工具 将 其 移动 至 合适 位 置 ， 然 后 右键 单 击 图 层 右 侧 的 “指示 图 层 效 果 ” 
按钮 ， 在 弹出 的 列表 框 中 选择 “清除 图 层 样式 ”， 如 图 8-72 所 示 。 
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图 8-69 ”设置 字符 选项 图 8-70 ”输入 文本 图 8-71 绘制 正 辆 


9 STEP 05 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ，@ 设 置 “ 字 体系 列 ” 为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 7.65 点 、“ 行 距 ” 为 11.95 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -100、“ 颜 色 ” 
为 白色 ( RGB 参 数值 分 别 为 255、255、255 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 8-73 所 示 。 

9 STEP 06 输入 相应 文本 并 适当 调整 位 置 ， 效 果 如 图 8-74 所 示 。 


在 Photoshop CC 2018 工 作 界 面 中 ，“ 图 层 ” 面 板 是 进行 图 层 编辑 操作 时 必 不 : 
[专家 指点 ) 可 少 的 工具 。“ 图 层 ” 面 板 显示 了 当前 图 像 的 图 层 信息 ， 从 中 可 以 调节 图 层 登 放 顺 
， 序 、 图 层 透明 度 以 及 图 层 混合 模式 等 参数 ， 儿 乎 所 有 的 图 层 操作 都 可 以 通过 它 来 实现 。 选 择 “ 窗 
。 口 ”| “图 层 ” 命 令 ， 即 可 在 工作 区 中 显示 “图 层 ” 面 板 。 


4 并 
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图 8-72 ”复制 调整 文字 图 8-73 ”设置 字符 选项 图 8-74 输入 文本 


e STEP 07 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 白色 ( RGB 参数 值 均 为 
255 ) 、“ 摘 边 ” 为 无 、“ 半 径 ” 为 46 像 素 ， 在 图 像 编 辑 窗口 中 绘制 一 个 圆 角 矩形， 效果 如 图 8-75 


所 示 。 
四 
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9 STEP 08 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 什 设置 “字体 系列 ”为 “方正 细 黑 一 
简体 ”、“ 字 体 大 小 ”为 12.16 点 、“ 行 距 ” 为 26.79 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -100、“ 颜 
色 ” 为 灰色 ( RGB 参数 值 为 195、192、192 ) ; 全 激活 仿 粗 体 图 标 ， 全 在 图 像 编辑 窗 口中 输入 相应 文 
本 ， 并 适当 调整 位 置 ， 如 图 8-76 所 示 。 

9 STEP 09 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 亮 黄 色 ( RGB 参数 值 为 
255、255、0 ) 、“ 描 边 ” 为 无 、“ 半 径 ” 为 46 像 素 ， 在 图 像 编 辑 窗口 中 绘制 一 个 圆 角 矩形 ， 效 果 如 
图 8-77 所 示 。 


图 8-75 ”绘制 圆 角 和 矩形 图 8-76 输入 文本 图 8-77 ”绘制 圆 角 憩 形 


e STEP 10 选取 工具 箱 中 的 横 排 文 字 工 具 ， 在 “字符 ”面板 中 ， 引 设置 “字体 系列 ”为 “方正 细 黑 一 
简体 ”、 “字体 大 小 ”为 12.16 点 、“ 行 距 ” 为 26.79 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -100、“ 颜 


色 ” 为 暗 红色 ( RGB 参 数值 为 255、38、38 ) ; @ 激 活 仿 粗 体 图 标 ， 合 在 图 像 编辑 窗口 中 输入 相应 文 
本 ， 并 适当 调整 位 置 ， 效 果 如 图 8-78 所 示 。 

9 STEP 11 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 亮 黄色 ( RGB 参数 值 为 
255、255、0 ) 、“ 摘 边 ” 为 无 、“ 半 径 ” 为 46 像 素 ， 在 图 像 编 辑 窗口 中 绘制 一 个 圆 角 和 矩形， 效果 如 


图 8-79 所 示 。 
e@e STEP 12 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 和 设置 “字体 系列 ”为 “方正 细 黑 一 
简体 ”、 “字体 大 小 ”为 12.16 点 、“ 行 距 ” 为 26.79 点 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 -100、“ 颜 


色 ” 为 暗 红色 ( RGB 参 数值 为 255、38、38 ) ; 四 激活 仿 粗 体 图 标 ; 个 在 图 像 编 辑 窗口 中 输入 相应 文 
本 ， 并 适当 调整 位 置 ， 效 果 如 图 8-80 所 示 。 

9 STEP 13 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 和 四 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 距 ” 为 22.03 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -100、“ 颜 色 ” 为 
灰色 ( RGB 参数 值 为 173、170、170 ) ; 四 激活 仿 粗 体 图 标 ， 效 果 如 图 8-81 所 示 。 

9 STEP 14 输入 相应 文本 并 适当 调整 位 置 ， 效 果 如 图 8-82 所 示 。 


在 Photoshop CC 2018 工 作 界 面 中 ， 圆 角 和 矩形 工具 |@, 用 来 绘制 贺 角 秆 形 ， 选 取 
工具 箱 中 的 圆 角 矩形 工具 ， 在 工具 属性 栏 的 “半径 ”文本 框 中 可 以 设置 圆 角 半径 。 : 
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不 知道 口令 ? 口令 ， 我 要 口令 红包 不 知道 口令 ? 口令 ; 我 要 口令 红包 


图 8-80 ”输入 文本 


图 8-78 输入 文本 图 8-79 ”绘制 圆 角 和 矩形 
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图 8-81 设置 字符 选项 图 8-82 ”输入 文本 
9 STEP 15 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ” 为 灰色 ( RGB 参数 
值 为 173、170、170 ) ， 在 图 像 编 辑 窗 口中 绘制 一 个 效果 如 图 8-83 所 示 的 形状 ， 按 Enter 键 确认 绘制 ， 


并 适当 调整 形状 位 置 。 
9 STEP 16 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
灰色 ( RGB 参 数值 分 别 为 173、170、170 ) 、“ 粗 细 ” 为 2 像素 ， 在 图 像 的 左上 角 绘 制 一 个 直线 形状 ， 


效果 如 图 8-84 所 示 。 
e STEP 17 按 Ctrl 十 J 组 合 键 ， 复 制 直 线形 状 ， 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 在 控制 框 上 单 击 鼠标 


”命令 ， 效 果 如 图 8-85 所 示 。 


右键 ， 在 弹出 的 快捷 菜单 中 选择 “水 平 翻转 nnD 文 》 
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图 8-83 ”绘制 形状 图 8-84 绘制 直线 图 8-85 水平 翻转 复制 直线 


8.3.3 ”设计 口令 红包 育 景 效果 


口令 红包 在 微 信 中 一 般 以 聊天 窗口 的 形式 出 现 ， 下 面 详细 介绍 制作 口令 红包 背景 
效果 的 方法 。 其 操作 步骤 如 下 。 口 世相 于 9 

e STEP 01 按 Ctl 十 O 组 合 键 ， 打 开 “ 手 机 界面 jpg” 素 材 图 像 ， 在 “图 层 ” 面板 中 ， 解 ” 扫 查看 饮 频 
锁 图 层 ， 用 移动 工具 将 图 像 拖 中 至 图 像 编辑 窗口 中 ， 将 图 层 命名 为 “手机 界面 ”。 按 Ctrl 十 T 组 合 键 ， 
调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 8-86 所 示 。 

9 STEP 02 在 “手机 界面 ”图 层 上 方 新 建 一 个 “黑色 不 透明 ”图 层 ， 选 取 工 具 箱 中 的 矩形 选 框 工具 ， 绘 
制 一 个 矩形 选 框 ， 选 择 “ 编 辑 ”|“ 填 充 ” 命 令 ， 为 选 框 填充 黑色 ( RGB 参数 值 均 为 0 ) ， 设 置 图 层 的 
“不 透明 度 ” 为 73%， 按 Ctrl 十 D 组 合 键 取消 选 框 ， 效 果 如 图 8-87 所 示 。 

9 STEP 03 展开 “图 层 ” 面 板 ， 按 住 Shift 键 的 同时 ， 选 择 “手机 界面 ”和 “黑色 不 透明 ”图 层 ， 将 两 个 图 
层 拖 折 至 最 底层 锁 住 的 “背景 ”图 层 上 方 ， 效 果 如 图 8-88 所 示 。 至 此 ， 完 成 口令 红包 H5 页 面 设计 。 
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图 8-86 拖 虽 图 像 图 8-87 ”新 建 图 层 图 8-88 拖 昌 图 层 


人 才 招 聘 对 于 每 个 企业 集团 都 是 一 个 重要 环节 ， 常 见 的 招聘 方式 有 企业 
专场 招聘 会 、 校 园 招聘 会 等 。 本 章 主 要 介绍 招聘 求职 HS 广告 设计 的 方法 。 


企业 招聘 : 和 车 握 专场 招聘 会 的 H5 页 面 设 计 
实习 招 帮 : 掌握 校园 招聘 会 的 H5 页 面 设计 
应 聘 求职 ， 掌握 个 人 简历 的 H5 页 面 设计 
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有 企业 招聘 : 掌握 专场 招聘 会 的 H5 页 面 设计 


企业 专场 招聘 会 是 为 了 满足 企业 的 用 人 需求 ， 一 方面 补充 离职 人 员 和 扩大 企业 规模 ， 男 一 方面 也 
能 够 增强 企业 的 葛 争 优势 ， 同 时 专场 招聘 会 所 招聘 的 员工 ， 他 们 的 教育 背景 、 工 作 经 历 以 及 思维 方式 
等 都 人 不同， 可 以 使 企业 人 力 资源 更 加 丰富 和 全 面 。 

本 实例 的 最 终 效果 如 图 9-1 所 示 。 
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素材 文件 | 素材 \ 第 9 章 \ 风 景 照 jpg、 标 志 .psd 
效果 文件 | 效果 \ 第 9 章 \ 掌 握 专场 招聘 会 H5 页 面 设计 .psd、 掌 握 专 场 招聘 会 H5 页 面 设计 .jpg 


9.1.1 设计 专场 招聘 会 渐变 合成 背景 效果 


在 设计 背景 时 ， 将 图 片 与 背景 运用 渐变 合成 的 效果 进行 制作 ， 可 以 使 图 片 与 背景 

更 为 融洽 。 下 面 详细 介绍 设计 专场 招聘 会 渐变 合成 背景 效果 的 方法 。 其 操作 步骤 如 下 。” 辐 吐 之 准 导 
@ STEP 01 选择 “文件 | “新建 ”命令 ， 弹 出 “新 建文 档 ” 对 活 框 ，@ 设 置 “ 名 称 ” 扫 码 看 视频 
为 “掌握 专场 招聘 会 H5 页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 
像素 /英寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “和 白色”， 如 图 9-2 所 示 ; @ 单 击 “ 创 
建 ” 按 钮 ， 新 建 一 个 空白 图 像 。 


图 9-2 ”设置 各 选项 
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9 STEP 02 在 “图 层 ” 面 板 下 方 ， 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 。 选 取 工 具 箱 中 
的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ，@ 在 渐变 条 上 设置 红 褐 色 到 褐色 的 渐变 ( RGB 参 数值 分 别 
为 152、53、44; 39、11、1 ) ; 四 单 击 “新 建 ”按钮 ， 新 建 渐变 预 设 ， 如 图 9-3 所 示 。 

@ STEP 03 在 工具 属性 栏 中 设置 渐变 方式 为 “线性 渐变 ”， 在 图 像 编 辑 窗口 中 的 “图 层 1” 图 层 上 ， 由 
上 至 下 拖 动 鼠标 ， 为 图 层 填充 线性 渐变 ， 效 果 如 图 9-4 所 示 。 
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位 置 {C): % 喇 除 (D) 


图 9-3 新建 渐变 预 设 图 9-4 填充 线性 渐变 
9 STEP 04 按 Ctrl 十 0 组合 键 ， 打 开 “ 风 景 照 .jpg” 素材 图 像 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “副本 ”图 
层 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 窗口 中 ， 并 将 图 层 命名 为 “风景 照 ”， 效 果 如 图 9-5 


所 示 。 
e STEP 05 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 9-6 所 示 。 


图 9-5 拖 奥 图 像 图 9-6 调整 图 像 
9 STEP 06 在 “图 层 ” 面 板 中 ， 选 中 “风景 照 ” 图 层 ， 单 击 面板 下 方 的 “添加 矢量 蒙 版 ”按钮 ， 为 图 层 
添加 蒙 版 ， 如 图 9-7 所 示 。 
9 STEP 07 设置 前 景色 为 黑色 ( RGB 参数 值 均 为 0 ) ， 背 景色 为 白色 ( RGBC 参 数值 均 为 255 ) ， 选 取 工 
具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ，@@ 选 择 “ 预 设 ” 为 “前 景色 到 青 景色 渐变 ”; @ 单 


击 “确定 ”按钮 ， 选 择 渐变 预 设 ， 如 图 9-8 所 示 。 
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图 9-7 添加 矢量 蒙 版 图 9-8 选择 渐变 预 设 
9 STEP 08 在 “图 层 ” 面 板 中 ， 单 击 “ 风 景 照 ”图 层 中 的 “图 层 蒙 版 缩 览 图 ”， 并 选取 工具 箱 中 的 渐变 
工具 ， 在 工具 属性 栏 中 设置 渐变 方式 为 “线性 渐变 ”， 在 图 像 编 辑 窗口 中 的 “风景 照 ” 图 像 上 ， 由 上 
至 下 垂直 拖 电 鼠 标 至 合适 位 置 ， 为 图 层 蒙 版 添加 线性 渐变 ， 效 果 如 图 9-9 所 示 。 
@ STEP 09 选择 “窗口 ”|“ 调 整 ”命令 ， 在 弹出 的 “调整 ”面板 中 ， 单 击 “ 创 建新 的 曲线 调整 图 层 ” 按 
钮 ， 创 建 一 个 “曲线 1” 图 层 ， 如 图 9-10 所 示 。 


30 ， 芭 层 ”这 下 小 到 
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寥 定 ; 园 jf 中 二 自 培训 : 100% ~ 
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© 是 : 国 网 隶 昭 
。 国 ==: 
© | | 此 及 久 


， cs 六 QQ 各 站 
图 9-9 ”添加 线性 渐变 图 9-10 创建 新 的 曲线 调整 图 层 
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入 家 指点 在 Photoshop CC 2018 工 作 界 面 中 ， “曲线” 命令 是 功能 强大 的 图 像 校正 命 \ 

飞信 / 令 ， 这 个 命令 可 以 在 图 像 的 整个 色调 范围 调整 不 同 的 色调 ， 还 可 以 对 图 像 中 的 个 别 

: 颜色 通道 进行 精确 的 调整 。 : 

9 STEP 10 在 “图 层 ” 面板 中 ， 单 击 “ 曲 线 1” 图 层 缩 览 图 ， 弹 出 曲线 “属性 ”面板 ， 在 曲线 上 单 击 妃 
标 左 键 ， 新 建 一 个 控制 点 ， 在 下 方 设置 “输入 ”为 190、“ 输 出 ”为 255， 再 次 单 击 曲 线 ， 增 加 一 个 新 
的 控制 点 ， 在 下 方 设置 “输入 ”为 10、“ 输 出 ”为 0， 效 果 如 图 9-11 所 示 。 

9 STEP 11 在 “调整 ”面板 中 ， 单 击 “ 创 建新 的 自然 饱和 度 调整 图 层 ” 按 钮 ， 创 建 一 个 “自然 饱和 度 
1” 图 层 ， 如 图 9-12 所 示 。 

e STEP 12 在 “图 层 ” 面 板 中 ， 单 击 “自然 饱 和 度 1” 图 层 缩 览 图 ， 弹 出 自然 饱和 度 “ 属 性 ”面板 ， 设 
置 “ 自 然 饱 和 度 ” 为 70，“ 饱 和 度 ” 为 14， 效 果 如 图 9-13 所 示 。 
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3D 力 后 ”通道 ”路 芯 


A 关 型 “四 人 @TIOSD 帅 
正常 v 不 要 有 度 : 100% ~ 
恋 证 : 加 A 生 柱 自 填充 : 100% ~ 
oy 引 | 自燃 饱和 度 1 
© 国 a | 曲线 1 
© :二 四 _ 风景 归 
创建 
。 国 ==: 


。 | | 让 加 


; f i D2 白 昌 将 ; E 
图 9-11 设置 曲线 线 3 效果 图 9-12 创建 新 的 自然 饱和 度 调整 图 层 图 9-13 设置 自然 饱和 度 效 果 


EE 二 在 Photoshop CC 2018 工 作 界 面 中 ，“ 自 然 饱 和 度 ” 命 令 可 以 调整 整 幅 图 像 或 : 
把 单个 颜色 分 量 的 饱和 度 和 亮度 值 。 
> 自然 他 和 度 : 在 颜色 接近 最 大 饱和 度 时 ， 最 大 限度 地 减少 修剪 ， 可 以 防止 过 度 饱和 。 
> 人 饱和 度 : 用 于 调整 所 有 颜色 ， 而 不 考虑 当前 的 饱和 度 。 : 


9.1.2 设计 专场 招聘 中 会 招聘 信息 边 力 框 效果 


在 设计 招聘 会 页 面 时 ， 为 了 突出 招聘 主题 ， 可 以 制作 一 个 边框 效果 ， 将 招聘 主题 置 mk 
入 边框 内 。 下 面 详细 介绍 设计 专场 招聘 会 招聘 信息 边框 效果 的 方法 。 其 操作 步骤 如 下 。 国 训 将 己 
e STEP 01 选取 工具 箱 中 的 多 边 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 " 为 “ 形 提 吗 看 视频 
状 ”、“ 填 充 ” 为 无 、“ 描 边 ” 为 白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 宽度 ”为 6 像素 、“ 边 ”为 
6， 按 住 Shift 键 的 同时 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘制 一 个 六 边 形 形状 ， 得 到 “多 边 形 1” 图 层 ， 
效果 如 图 9-14 所 示 。 
9 STEP 02 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 人 全 为 
白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 ” 为 无 、“ 粗 细 ” 为 6 像素 ， 在 图 像 编 辑 窗口 中 绘制 一 个 直线 形 
状 ， 得 到 “形状 1” 图 层 ， 效 果 如 图 9-15 所 示 。 


图 9-14 绘制 六 边 形 图 9-15 绘制 直线 


Photoshop 
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9 STEP 03 在 “图 层 ” 面 板 中 ， 选 中 “形状 1” 图 层 ， 将 其 栅 格 化 ， 选 取 工 具 箱 中 的 橡皮 擦 工具 ， 在 工 
具 属 性 栏 中 设置 “硬度 ”为 100%、“ 不 透明 度 ” 为 100%， 适 当 擦 除 部 分 图 像 ， 效 果 如 图 9-16 所 示 。 

9 STEP 04 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 
和 辐 设 置 “ 字 体系 列 ” 为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 "为 55 点 、“ 行 距 ” 为 22.03 点 、“ 设 置 所 选 字 
符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; 外 激活 仿 粗 体 图 标 ， 如 图 9-17 所 示 。 


字符 。 段落 «| 三 
| 方正 细 黑 -简体 ~ - “| 
三 55 点 v|1 全 |22.03 点 > 
| 过 0% ~ 
IT 100% , 工 100% 


和 


区 “天 了 ec、 ve 
Bie 美国 更 语 v| 呈 | 袖 判 “> 
图 9-16 擦 除 图 像 图 9-17 设置 字符 选项 


9 STEP 05 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-18 所 示 。 


© STEP 06 在 “字符 ”面板 中 ， 人 他 设置 “字体 系列 ”为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 ”为 11 点 、 
“行距 ”为 22.03 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 100、“ 颜 色 ” 为 和 白色 ( RGB 参 数值 均 为 255 ) ， 


人 @ 激 活 仿 粗 体 图 标 ， 效 果 如 图 9-19 所 示 。 
9 STEP 07 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-20 所 示 。 
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图 9-19 设置 字符 选项 图 9-20 ”输入 文本 


9.1.3 ”设计 专场 招聘 会 的 文子 宣传 内 


招聘 页 面 的 设计 除了 需要 彰显 主题 外 ， 还 需要 将 一 些 重要 的 文字 信息 标明 ,， 例 “器 内 国 
如 招聘 会 的 主题 、 时 间 、 地 点 等 。 下 面 详细 介绍 设计 专场 招聘 会 的 文字 宣传 内 容 的 方 ” 辣 内 光 中 ! 
法 。 其 操作 步骤 如 下 。 扫 码 看 视频 


第 9 章 “ 人 才 招 自 : 招聘 求职 的 H5 广 告 设计 


9 STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 和 选择“ 窗口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “方正 小 标 宋 简体 ”、“ 字 体 大 小 ”为 18 点 、“ 行 距 ” 为 22.03 点 、“ 设 置 所 选 字 符 
的 字 距 调整 ”为 30、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 235 ) ， 如 图 9-21 所 示 。 

9 STEP 02 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-22 所 示 。 
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图 9-21 设置 字符 选项 图 9-22 输入 文本 


9 STEP 03 在 “字符 ”面板 中 ， 人 @ 设 置 “ 字 体系 列 ” 为 “方正 小 标 宋 简体 ”、“ 字 体 大 小 ”为 21.76 
点 、“ 行 距 ” 为 19.97 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0(、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 
255 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 9-23 所 示 。 

eo STEP 04 输入 相应 文本 并 调整 至 合 适 位 置 ， 效 果 如 图 9-24 所 示 。 
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图 9-23 ”设置 字符 选项 图 9-24 输入 文本 

9 STEP 05 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 中 倩 简体 ”、 “字体 大 小 ”为 10 点 、“ 行 
距 ” 为 22.03 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 30、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 
图 9-25 所 示 。 

9 STEP 06 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-26 所 示 。 

9 STEP 07 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 中 倩 简体 ”、“ 字 体 大 小 ”为 6.9 点 、“ 行 
距 ” 为 13.2 点 、“ 设 置 所 选 字符 的 字 中 调整” 为 ?0、“ 颜 色 ” 为 白色 ( RGB 参数 信 均 为 255 ) ， 如 


图 9-27 所 示 。 


9 STEP 08 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-28 所 示 。 
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图 9-27 设置 字符 选项 图 9-28 ”输入 文本 


© STEP 09 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 
距 ” 为 22.03 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 50、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 


图 9-29 所 示 。 
e STEP 10 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-30 所 示 。 
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图 9-29 ”设置 字符 选项 图 9-30 ”输入 文本 
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9 STEP 11 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 ”为 6 点 、“ 行 
距 ”为 22.03 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0(、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 
图 9-31 所 示 。 

eo STEP 12 输入 相应 文本 并 调整 至 合 适 位 置 ， 效 果 如 图 9- 32 所 未 。 
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图 9-31 设置 字符 选项 图 9-32 输入 文本 
9 STEP 13 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 
距 ” 为 16 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 人 参数 值 均 为 235 ) ， 如 图 9-33 
所 示 。 
e STEP 14 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-34 所 示 。 
9 STEP 15 按 Ctrl 十 O 组 合 键 ， 打 开 “ 标 志 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 图 像 编 辑 窗口 
合适 位 置 ， 并 将 “图 层 ” 命 名 为 “标志 ”， 效 果 如 图 9-35 所 示 。 
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图 9-33 设置 字符 选项 图 9-34 输入 文本 图 9-35 ” 拖 提 图 像 
9 STEP 16 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 9-36 所 示 。 


9 STEP 17 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 人 @ 设 
置 “ 字 体系 列 ” 为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 ”为 8 点 、“ 行 距 ” 为 22.03 点 、“ 设 置 所 选 字 符 
的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; @ 激 活 仿 粗 体 图 标 ， 0 
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eSTEP 18 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 9-38 所 示 。 至 此 ， 完 成 专场 招聘 会 的 H5 页 
面 设计 。 
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图 9-36 调整 图 像 图 9-37 设置 字符 选项 图 9-38 ”输入 文本 


实习 招募 : 掌握 校园 招聘 会 的 H5 页 面 设计 


校园 招聘 是 指 企业 在 学 校 通 过 举办 招聘 会 、 校 园 宣讲 招募 等 方式 ， 直 接 从 学 校 招聘 ， 邀 请 学 生 到 
企业 实习 并 选拔 留用 。 正 因为 应 届 毕 业 生 具 有 对 未 来 抱 有 全 慢 、 富 有 热情 、 学 习 能 力 强 、 善 于 接受 新 
事物 、 可 塑性 强 等 特质 ， 吸 引 了 企业 的 眼球 ， 校 园 招聘 成 为 企业 重要 的 招聘 渠道 之 一 。 

本 实例 的 最 终 效果 如 图 9-39 所 示 。 


Sr "要 六 医 


柏 聘 去 


py 为 你 我 提供 最 好 的 i 
ds 你 想 长 ， 就 给 你 一 双 
而 我 们 就 是 你 师 拥 卫 


RN 


Et WO 8000-2468ipt 
地 寺 ， 省 南 发 示 市 区 人 才 和 市场 


图 9-39 ”实例 效果 


I 墨 . 、 洱 秽 1. a 、 | 、 、 
素材 文件 素材 \ 第 9 章 \ 蓝 色 水 墨 .psd、 鸿 揭 1.psd、 鸿 揭 2.psd、 卡 通 人 物 1.psd、 卡 通 人 物 2.psd、 城 


市 .psd、 电 话 .psd 
效果 文件 | 效果 \ 第 9 章 \ 掌 握 校园 招聘 会 HS 页 面 设 计 .psd、 和 掌握 校园 招聘 会 H5 页 面 设计 .jpg 
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9.2.1 设计 校园 招聘 会 动感 模糊 育 景 效果 


校园 招聘 会 招聘 的 都 是 洋溢 肴 青春 气 具 、 对 未 来 充满 布 豆 的 年 轻 人 ， 上 所 以 在 设计 
背景 效果 时 ， 可 以 使 用 动感 模糊 的 效果 ， 让 整个 页 面 更 加 贴近 主题 气氛 。 下 面 详细 介 [= 
绍 设计 招聘 会 动感 模糊 背景 效果 的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视 频 
9 STEP 01 选择 “文件 |“ 新建” 个 令 ， 弹 出 “新 建文 档 ” 对 语 框 ， 设 置 “ 名 称 ” 为 “掌握 校园 招聘 会 H5 
页 面 设 计 ”、“ 宽 度 ” 为 1080 像 素 、 “高度 ”为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模式 ”为 
“RGB 颜色 ”、“ 背 景 内 容 ” 为 “和 白色 ”， 如 图 9-40 所 示 ， 单 击 “ 创 建 ”按钮 ， 新 建 一 个 空白 图 像 。 


人 9 最 近 使 用 项 。 已 保 椰 ”| 加 片 。 打印 ” 图 机 和 插图 


让 我 们 开始 尝试 新 事物 吧 。 


从 您 自己 的 文档 设 于 或 一 系列 文档 预 设 开始 以 快速 开始 工作 ， 


图 9-40 设置 各 选项 
9 STEP 02 在 “图 层 ” 面 板 下 方 ， 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 设 置 前 景色 为 
灰白 色 ( RGB 参 数值 均 为 250 ) ， 为 “图 层 1” 图 层 填 充 前 景色 ， 效 果 如 图 9-41 所 示 。 
@ STEP 03 选择 “ 滤 镜 ”|“ 杂 色 ”|“ 添 加 杂 色 ”命令 ， 在 弹出 的 “添加 杂 色 ”对 话 框 中 ，@ 设 置 “ 数 
量 ” 为 12.3%; 四 选中 “高 斯 分 布 ” 单 选 按钮 和 “ 单 色 ” 复 选 框 ， 如 图 9-42 所 示 。 


9 STEP 04 单 击 “确定 ”按钮 为 图 层 添 加 杂 色 ， 效 果 如 图 9-43 所 示 。 


填充 添加 


图 9-41 填充 前 景色 i 设置 各 选项 图 9-43 添加 杂 色 


ee 在 Photoshop CC 2018 工 作 界 面 中 ，“ 添 加 杂 色 ”里 的 高 斯 分 布 在 某 一 个 参数 
家 指点 范围 内 ， 与 平均 分 布 相 比 ， 可 以 让 画面 对 比 更 强烈 ， 对 原 图 的 信息 保留 得 更 少 。 但 


w+ 一: 


”起 过 一 -个 阅 值 的 上 时候， 二 者 对 画 i 面 影 响 的 差别 基本 上 可 以 忽略 不 计 了 。 : 
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9 STEP 05 选择 “ 滤 镜 ”|“ 模 糊 ”|“ 动 感 模糊 ”命令 ， 在 弹出 的 “动感 模糊 ”对 话 框 中 ， 设置“ 角 
度 ” 为 45 度 、“ 距 离 ” 为 2000 像 素 ， 如 图 9-44 所 示 。 

9 STEP 06 单 击 “ 确 定 ”按钮 为 图 层 添加 动感 模糊 ， 效 果 如 图 9-45 所 示 。 

@ STEP 07 按 Ctrl 十 0 组合 键 ， 打 开 “ 蓝 色 水 墨 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 昂 至 图 像 编 辑 
窗口 中 的 合适 位 置 ， 并 将 图 层 命 名 为 “ 蓝 色 水 墨 ”， 效 果 如 图 9-46 所 示 。 


we 
2 
拖 复 
添加 
| Q 1i00% QQ@ 
| 角度 (A): 45 度 (CO 
距离 (D): Ee J 
”图 9-44 44 设置 名 选项 图 9-45 添加 动感 模糊 图 9-46 拖 引 图像 
e STEP 08 按 Ctrl 十 T 组 合 键 ， ee 适当 调整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 


果 如 图 9-47 所 示 。 

9 STEP 09 按 Ctrl 十 O 组 合 键 ， 打 开 “ 城 市 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 辑 
窗口 中 ， 效 果 如 图 9-48 所 示 。 

9 STEP 10 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 并 
将 图 层 命名 为 “城市 ”， 效 果 如 图 9-49 所 示 。 


a a 
E29 
图 9-47 调整 图 像 图 9-48 ” 拖 息 图 像 图 9-49 ”调整 图 像 
9.2.2 ”设计 校园 招聘 会 页 面 主题 宣传 信息 


为 了 更 加 贴近 校园 招聘 会 的 主题 ， 在 设计 招聘 主题 信息 时 ， 本 实例 采用 了 一 个 蓝 色 

调 为 主 的 色彩 。 下 面 详细 介绍 设计 招聘 会 Ee 其 操作 步骤 如 下 。 Hh 
e STEP 01 选取 工具 箱 中 的 横 排 文 字 工具 ， 选 择 “ 窗 口 ”| “字符 ”命令 ， 在 弹出 的 码 看 视频 
“字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 2 点 、“ 行 距 ” 为 72 操 、 
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“所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 并 在 工具 属性 栏 中 激活 “ 居 
中 对 齐 文 本 ”按钮 ， 如 图 9-50 所 示 。 
9 STEP 02 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-51 所 示 。 
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图 9-50 设置 字符 选项 图 9-51 输入 文本 

9 STEP 03 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编 辑 器 ”对 话 框 ，@@ 在 渐变 条 上 设置 蓝 色 到 紫色 的 渐 
变 ( RGB 参数 值 分 别 为 ?3、44、220; 33、4、128 ) ; 四 单 击 “ 新 建 ” 按 钮 ， 新 建 渐变 预 设 ， 如 图 9-52 
所 示 。 

9 STEP 04 在 “图 层 ” 面板 中 ， 双 击 “校园 招聘 会 ”文字 图 层 空 白 处 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 
@ 选 中 “ 渐 变 芭 加 ” 复 选 框 ， 全 设置 “混合 模式 ”为 “正片 苔 底 ”、“ 不 透明 度 ” 为 100%、“ 渐 
变 ” 为 新 建 的 蓝 色 到 紫色 的 渐变 色 、“ 样 式 ” 为 “线性 ”、“ 和 角度 ”为 -122 度 、“ 缩 放 ” 为 51%， 如 
图 9-53 所 示 。 
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图 9-52 ”新 建 渐变 预 设 图 9-53 ”设置 图 层 样式 
9 STEP 05 单 击 “确定 ”按钮 为 文字 图 层 添加 渐变 二 加 ， 效 果 如 图 9-54 所 示 。 
9 STEP 06 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 18 点 、“ 行 
距 ” 为 72 点 、“ 所 选 字符 的 字 距 调整 ”为 200、“ 颜 色 ” 为 紫色 ( RGB 参 数值 分 别 为 33、4、128 ) ， 
如 图 9-55 所 示 。 


e STEP 07 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-56 所 示 。 
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二 se 本 
TITITTITTTE 
fi et AaaT lt 1 
图 9-54 ”添加 渐变 又 加 图 9-55 设置 字符 选项 图 9-56 输入 文本 
© STEP 08 在 “字符 ” 面板 中 ， 设置 “字体 系列 ” 区 “方正 综艺 简体 ” 本 0 4 


距 ” 为 “自动 ”、“ 所 选 字 符 的 字 距 调整 ”为 50、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ， 如 图 9-57 所 


示 。 然 后 在 工具 属性 栏 中 激活 “居中 对 齐 文本 ”按钮 夸 。 

9 STEP 09 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-58 所 示 。 

9 STEP 10 选取 工具 箱 中 的 和 窍 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩 形 ， 得 到 “和 矩形 1” 


层 ， 效 果 如 图 9-59 所 示 。 
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图 9-57 设置 字符 选项 图 9-58 ”输入 文本 图 9-59 ”绘制 矩形 
e STEP 11 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 矩 形 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 并 
在 “图 层 ” 面板 中 ， 设 置 “ 珑 形 1” 图 层 的 “不 透明 度 ” 为 66%， 效 果 如 图 9-60 所 示 。 
9 STEP 12 按 Ctrl 十 O 组 合 键 ， 打 开 “ 电 话 .psd” 素 材 图 像 ， 用 移动 工具 拖 电 素 材 图 像 至 图 像 编 辑 窗 口中 
的 适当 位 置 ， 并 将 图 层 命名 为 “电话 ”， 效 果 如 图 9-61 所 示 。 
9 STEP 13 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 


果 如 图 9-62 所 示 。 
9 STEP 14 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 
人 @@ 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 18 点 、“ 行 距 ” 为 “自动 ”、“ 所 选 字 符 的 字 距 调 


整 ” 为 0 “颜色 ”为 黑色 ( RGB 参 数值 均 为 0 ) ; 外 激活 仿 粗 体 图 标 ， 效 果 如 图 9-63 所 示 。 
9 STEP 15 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-64 所 示 。 


只 的 H5 三 告 设 计 
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9 STEP 16 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
无 、“ 描 边 ” 为 黑色 ( RGB 参数 值 均 为 0 ) 、“ 描 边 宽度 ”为 10 像 素 ，“ 描 边 类 型 ”为 …~、“ 粗 细 ” 
为 5 像素 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘 制 一 条 直线 ， 得 到 “形状 1” 图 层 ， A 
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图 9-62 ”调整 图 像 


图 9-60 调整 图 像 图 9-61 拖 旨 图 像 
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图 9-63 ”设置 字符 选项 图 9-64 输入 文本 图 9-65 ”绘制 直线 
“字符 ”个 令 ， 在 弹出 的 “字符 ”面板 中 ， 


e STEP 17 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”| 
“行距 ”为 “自动 ”、“ 所 选 字符 的 字 距 调 


加 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 11 点 、 
“颜色 ”为 黑色 ( RGB 参数 值 均 为 0 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 9-66 所 示 。 


整 ” 为 0、 
9 STEP 18 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-67 所 示 。 
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图 9-66 设置 字符 选项 


图 9-67 输入 文本 
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9.2.3 ”设计 校园 招聘 会 元 素 角 饰 效果 


融入 相关 主题 元 素 ， 是 做 页 面 设 计时 必须 考虑 到 的 一 点 ， 本 节 运 用 校园 招聘 会 的 
相关 元 素来 添加 设计 页 面 。 下 面 详细 介绍 设计 校园 招聘 会 元 素 装 饰 效果 的 方法 。 其 操 w Fp. 
作 步 又 如 下 。 扫 友 看 视 频 

9 STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 卡 通 人 物 1.psd” 素 材 图 像 ， 用 移动 工具 ， 将 素材 图 像 拖 蝶 至 图 像 
编辑 窗口 中 适当 的 位 置 ， 并 将 图 层 命 名 为 “卡通 人 物 1”， 效 果 如 图 9-68 所 示 。 

eSTEP 02 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 果 
如 图 9-69 所 示 。 
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湖南 省 长 沙市 二 太 区 人 才 招 喧 市 场 用 ; 湖南 省 长 沙市 岳 蓝 区 人 才 招聘 市 场 用 
图 9-68 拖 间 图 像 图 9-69 ”调整 图 像 


9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “ 鸿 欠 1.psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 图 像 编辑 窗 
口中 适当 位 置 ， 并 将 图 层 命名 为 “ 鸿 钨 1”， 效 果 如 图 9-70 所 示 。 

9 STEP 04 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适当 调整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 9-71 所 示 。 


为 你 复 提供 最 好 的 为 你 复 提供 最 好 的 


二 我 们 杂 是 从 轩 观 有关 于 我们 站 呈 纵 名 天 六 天 空 
© 8000-24681012 _ fuk © 8000-24681012 
湖 了 省 长 沙市 语 甬 区 人 才 招 聘 市 场 ， 湖 南 省 长 沙市 二 能 区 人 才 招聘 市 场 上 
图 9-70 拖 旨 图 像 图 9-71 调整 图 像 


9 STEP 05 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
新 建 的 蓝 色 到 紫色 的 渐变 色 、“ 渐 变样 式 ” 为“ 线性”、“ 旋 转 渐变 ”为 90 度 、“ 描 边 ” 为 无 ， 在 图 
像 编辑 窗口 中 绘制 一 个 如 图 9-72 所 示 的 形状 ， 得 到 “形状 2” 图 层 。 

9 STEP 06 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 忠 “ 形 状 2” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 得 到 
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“形状 2 找 贝 ”图 层 ， 效 果 如 图 9-73 所 示 。 


e STEP 07 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 角度 、 位 置 及 大 小 ， 并 按 Enter 键 确认 
变换 ， 效 果 如 图 9-74 所 示 


和 ie 上 坟 je 
今川 全 下 
/ 


7 X ,和 
所 由 一 万 玫 由 人 
绘制 同 古 瑟 二 二 EE = 


Us 
Ns 我 提供 最 好 的 下 指 提 供 最 好 的 
价 严 长 ， 赖 给 你 一 双 还 脱 像 同 蔗 ， 锋 给 你 一 双 翅 上 鹏 ” 你 由 长 ， 藉 给 你 一 双 

而 和 莉 们 丈量 优 炭 拷 脆 天 罕 而 我 们 就 是 你 加 羯 轨 天 衬 
图 9-72 ”绘制 形状 


图 9-73 ” 拖 旨 复制 图 像 图 9-74 调整 图 像 
9 STEP 08 在 图 像 编 辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 拒 “ 形 状 2” 图 层 所 对 应 的 图 像 至 其 他 位 置 ， 得 到 
“形状 2 找 贝 2” 图 层 ， 效 果 如 图 9-75 所 示 。 


© STEP 09 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图像 的 角度 、 位 置 及 大 小 ， 并 按 Enter 键 确认 变 
换 ， 效 果 如 图 9-76 所 示 。 


eSTEP 10 在 “图 层 ” 面板 中 ， 将 “形状 2 拷贝 2” 图 层 拖 蝶 至 “形状 2” 图 层 下 方 ， 将 “形状 2 捞 
贝 ”图 层 拖 电 至 “形状 2 拷贝 2” 图 层 下 方 ， 效 果 如 图 9-77 所 示 。 


rR i 由 i Pw 
ei 码 | 二 六 
让 了 | [LA 
作 机 交 园 先 校园 玫 
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Ea wm Hy wm 
拖 IE | Be 
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Er 

为 你 我 棍 供 最 好 的 选 站 休 我 提供 最 好 的 
你 息 太 ， 财 给 你 一 双 起 膀 你 粗 蔗 ， 氏 给 你 一 双 适 甩 属 光 
而 我 们 就 是 你 盟 翔 交 天 至 而 雅 们 就 是 你 畴 凑 朋 天 至 而 落 们 就 是 你 户 报 前天 空 。 

图 9-75 拖 息 复制 图 像 图 9-76 ”调整 图 像 


图 9-77 ”调整 图 层 顺 序 
9 STEP 11 按 Ctrl 十 O 组 合 键 ， 打开“ 卡通 人 物 2.psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 图 像 编 
辑 窗 口中 适当 位 置 ， 并 将 图 层 命名 为 “卡通 人 物 2”， 效 果 如 图 9-78 所 示 。 


eSTEP 12 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 果 
如 图 9-79 所 示 。 


9 STEP 13 在 图 像 编 辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 拒 “ 卡 通 人 物 2” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 
得 到 “卡通 人 物 2 拷贝 ”图 层 ， 效 果 如 图 9-80 所 示 。 
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器 有 ZZ 

为 你 我 提供 最 好 的 i 为 你 复 提 供 最 好 的 选择 为 你 我 提供 最 好 的 选 
你 酝 壕 ， 财 给 你 一 双 埋 甩 辆 放 ， 由 给 放 一 邓 迅 向 你 珊 任 ， 对 给 斌 一 邓 过 有 
而 确 们 就 是 如 闭 著 的 天 空 ~ 而 牙科 就 时 你 田 弄 旺 天 六 一 < 而 我们 就 量 你 虹 更 本 天 谤 
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图 9-79 ”调整 图 像 


图 9-80 拖 旨 复制 图 像 


图 9-78 拖 旭 图 像 


加 


Photoshop 


HD52 广 告 设 计 


9 STEP 14 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 拖 曙 锁 点 至 合适 位 置 ， 
并 在 “图 层 ” 面 板 中 将 “卡通 人 物 2 找 贝 ”图 层 拖 蝶 至 “卡通 人 物 2” 图 层 下方 ， 效 果 如 图 9-81 
所 示 。 

eSTEP 15 在 “图 层 ” 面 板 中 ， 双 击 “ 卡 通 人 物 2 拷贝 ”图 层 空白 处 ， 弹 出 “图 层 样式 ”对 话 框 ，@ 选 
中 “颜色 又 加 ” 复 选 框 ， 人 设置 “混合 模式 ”为 “正常 、“ 芭 加 颜色 ”为 黑色 ( RGB 参数 值 均 为 
0 ) 、“ 不 和 透明度” 为 100%， 如 图 9- A 


项 加 和 
相 榴 所 


为 你 大 提供 最 好 
俩 辐 医 ， 对 给 保 一 通明 
而 牧 们 就 是 你 圳 划 权 天 字 


| © 8000-24681 012 小 
i MA , 
图 9-81 调整 图 像 图 9-82 ”设置 图 层 样式 


9 STEP 16 单 击 “确定 ”按钮 为 图 层 添 加 颜色 于 加 ， 效 果 如 图 9-83 所 示 。 

9 STEP 17 选择 “ 滤 镜 ”|“ 模 糊 ”|“ 动 感 模糊 ”命令 ， 在 弹出 的 “动感 模糊 ”对 话 框 中 设置 “角度 ” 
为 45 度 、“ 距 离 ” 为 37 像 素 ， 如 图 9-84 所 示 。 

© STEP 18 单 击 We 按钮 为 图 层 添加 动感 模糊 ， 不如 国人 85 所 示 。 


。 在 Photoshop CC 2018 工 作 界面 中 ， 动 感 模糊 是 对 像素 进行 线性 位 移 ， 从 而 产 
外 生 一 种 沿 某 一 方向 模糊 的 效果 。 : 


4 校园 交 
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EN 


"地址 ， 上 让 ， 训 再 攻 沙市 和 了 区 人 才 要 了 市场 地 址 ; kel 
图 9-83 pp 图 9-84 设置 滤 镜 图 9-85 添加 动感 模糊 


9 STEP 19 按 Ctrl 十 O 组 合 键 ， 打 开 “ 鸿 忽 2.psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 图 像 编辑 窗 
口中 适当 位 置 ， 并 将 图 层 命名 为 “ 鸿 物 2”， 效 果 如 图 9-86 所 示 。 

9 STEP 20 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 果 
如 图 9-87 所 示 。 
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i | 
图 9-86 拖 慢 图 像 wy 


9 STEP 21 在 “图 层 ” 面 板 中 ， 双 击 “ 城 市 ”图 层 空 白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ，@ 选 中 
“外 发 光 ” 复 选 框 ， 全 设置 “混合 模式 ”为 “ 滤 色 ”、“ 不 透明 度 ” 为 100%、“ 杂 色 ” 为 0、“ 发 光 
颜色 ”为 红色 ( RGB 参 数值 分 别 为 255、0、0 ) 、“ 方 法 ”为 “柔和 ”、“ 扩 展 ” 为 29%、“ 大 小 ”为 
250 像 素 、“ 范 围 ” 为 50%、“ 拌 动 ” 为 0， 如 图 9-88 所 示 。 
e STEP 22 单 击 “确定 ”按钮 为 图 层 添 加 外 发 光 ， 并 在 “图 层 ” 面 板 中 ， 将 “卡通 人 物 2” 和 “卡通 人 物 
2 拷贝 ”两 个 图 层 拖 电 至 “城市 ”图 层 下 方 ， 效 果 如 图 9-89 所 示 。 至 此 ， 完 成 招聘 会 的 H5 页 面 设 计 。 
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下 家 局 ) 在 Photoshop CC 2018 工 作 界面 中 ,使 用 “外 发 光 ” 图 层 样式 可 以 为 所 选 图 层 中 的 
“过 家 指 所 ， 罗 外 边 绿 添加 发 光 效果 。 昌 然 该 图 层 样 式 的 名 称 为 “外 发 光 ”， 但 并 不 表示 它 只 能 
。 向 外 发 出 白色 或 亮色 的 光 ， 在 适当 的 参数 设置 下 ， 利 用 该 图 层 样式 一 样 可 以 使 图 像 发 出 深 色 的 光 。 


为 你 我 提供 最 好 的 


二 二 
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s 


© 8000-24681012 
| 湖南 省 长 小 市 前 区 人 才 招聘 市 场 用 
图 9-88 设置 图 层 样式 图 9-89 添加 外 发 光 


医 素 应聘 求 职 ， 掌 握 个 人 简历 的 H5 页 面 设计 


应 聘 求职 是 每 一 个 人 走 入 社会 寻求 工作 时 都 必须 经 历 的 一 个 过 程 ， 而 个 人 简历 就 是 这 段 过 程 中 必 
不 可 少 的 一 个 组 成 部 分 。 一 份 良好 的 个 人 简历 对 于 获得 面试 机 会 至 关 重 要 ， 求 职 时 要 将 自己 与 所 申请 


Photoshop 


H5 厂 告 设计 


职位 么 密 相 关 的 个 人 信息 简明 扼要 地 陈列 出 来 。 
本 实例 最 终 效 果 如 图 9-90 所 示 。 


” I 人 2 EAI 
联 郁 系 电话 13502043638 


图 9-90 ”实例 效果 


素材 文件 | 素材 \ 第 9 章 \ 红 幕布 psd、 手 -psd 


效果 文件 | 效果 \ 第 9 章 \ 党 握 个 人 简历 HS 页 面 设计 .psd、 和 擎 握 个 人 简历 HS 页 面 设 计 jpg 


9.3.1 设计 个 人 商 历 舞台 揭 坟 效果 


本 节制 作 的 个 人 秒 历 页 面 的 背景 ， 采 用 了 舞台 揭幕 式 的 效果 ， 同 时 也 意 指 面试 官 翻 
开 你 的 个 人 简历 。 下 面 详 细 介 绍 设计 个 人 简历 舞台 揭幕 效果 的 方法 。 其 操作 步骤 如 下 。 rT Pe 
e STEP 01 选择 “文件 ”| “新建” 命令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 习 四 看 视频 
为 “掌握 个 人 简历 H5 页 面 设 计 ”、 “宽度 ”为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 
素 /英寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “和 白色 ”， 如 图 9-91 所 示 ; 人 @ 单 击 “ 创 建 
按钮 ， 新 建 一 个 空白 图 像 。 


全 最 近 使 用 项 已 保存 当 片 打 日 图 稿 和 括 图 Wet 移动 设备 胶片 和 视频 
! 掌握 个 人 简历 H5 页 面 设计 壤 ! 
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图 9-91 设置 各 选项 
9 STEP 02 在 “图 层 ” 面 板 下 方 ， 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 将 其 命名 为 


“光照 效果 ”， 设 置 前 景色 为 白色 ( RGB 参 数值 均 为 255 ) ， 为 “图 层 1” 填 充 前 景色 ， 效 果 如 图 9-92 
所 示 。 
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9 STEP 03 选择 “ 滤 镜 ”|“ 泻 染 ”|“ 光 照 效果 ”命令 ， 在 右 侧 弹 出 的 “属性 ”面板 中 ， 人 @ 设 置 “ 光 照 
效果 ”为 “聚光灯 ”， 人 人 @ 在 图 像 编 辑 窗口 中 适当 调整 光照 效果 的 位 置 ， a 93 所 示 。 


图 9-92 ”填充 前 景色 图 9-93 ”设置 光照 效果 


至 在 Photoshop CC 2018 中 ， 可 以 在 图 像 上 制作 各 种 光照 效果 (只 能 用 于 RGB 文 
专家 指点 ) 件 ) 。 光 照 效果 是 一 个 比较 复杂 的 滤 镜 ， 可 以 创造 出 许多 奇妙 的 灯光 纹理 效果 。 


© STEP 04 单 击 图 像 编辑 窗口 上 方 的 “确定 ”按钮 ， 为 图 层 添 加 光照 效果 ， 效 果 如 图 9-94 所 示 。 
9 STEP 05 按 Ctrl 十 O 组 合 键 ， 打 开 “ 红 幕布 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 
辑 窗口 中 ， 并 将 图 层 命 名 为 “ 红 幕 布 ”， 效 果 如 图 9-95 所 示 。 


| 


图 9-94 添加 光照 效果 图 9-95 拖 复 “ 红 幕 布 ” 图 像 
9 STEP 06 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 9-96 所 示 。 
9 STEP 07 按 Ctrl 十 O 组 合 键 ， 打 开 “ 手 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 辑 窗 
口中 的 适当 位 置 ， 并 将 图 层 命 名 为 “ 手 ”， 效 果 如 图 9-97 所 示 。 


Photoshop 


H5 厂 告 设计 


调整 


图 9-96 调整 图 像 图 9-97 拖 役 “ 手 ” 图 像 
9 STEP 08 在 “图 层 ” 面 板 中 ， 双 击 “ 手 ”图 层 的 空白 处 ， 在 弹出 的 “图 层 样 式 ” 对 话 杠 中， 人 @ 选 
中 “投影 ” 复 选 框 ; 四 设置 “混合 模式 ”为 “正片 到底 ”、“ 阴 影 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 
0 ) 、“ 不 透明 度 ” 为 100%、“ 和 角度 ”为 28 度 、“ 距 离 ” 为 15 像 素 、“ 扩 展 ” 为 0、“ 大 小 ”为 0 像 
素 、“ 杂 色 ” 为 0， 如 图 9-98 所 示 。 
© STEP 09 单 击 “确定 ”按钮 为 图 层 添 加 投影 ， 效 果 如 图 9-99 所 示 。 
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图 9-98 ”设置 图 层 样 式 图 9-99 ”添加 投影 


9.3.2 ”设计 个 人 简历 主题 文字 效果 


个 人 简历 的 主题 文字 设计 要 人 简明 扼要 、 贴 近 主 题 。 下 面 详细 介绍 设计 个 人 简历 主题 
文字 效果 的 方法 。 其 操作 步骤 如 下 。 La 
e STEP 01 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 形状 、” 所 可 在 视 频 
“填充 ”为 白色 ( RGB 参 数值 均 为 255 ) 、“ 摘 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形 ， 得 到 
“和 谍 形 1” 图 层 ， 效 果 如 图 9-100 所 示 。 
9 STEP 02 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 窍 形 的 位 置 及 大 小 ， 并 在 “图 层 ” 面板 中 ， 设 
置 “ 矩 形 1” 图 层 的 “不 透明 度 ” 为 33%， 效 果 如 图 9-101 所 示 。 
© STEP 03 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 设置 
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“字体 系列 ”为 “方正 综艺 简体 ” “字体 大 小 ”为 $6.77 点 、“ 行 距 ”为 “自动 v”、“ 所 选 字符 的 字 
距 调 整 ” 为 0、“ 颜 色 ” 为 白色 人 


| 可 f 44 
字符 。 息 落 = 
| 方正 综艺 简体 

T 56.77 点 ”~v| 二 自动 ] 
VA 0 VA 
~ ! 1 
设置 澳 0og 
1T 100% 工 1loo% | 
so me:[ 
ET 
fi edt AaaT lt 
美国 英语 “| aa| 下 有 
图 9-100 ”绘制 矩形 图 9-101 调整 图 像 图 9-102 设置 字符 选项 


9 STEP 04 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-103 所 示 。 

9 STEP 05 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 56.77 点 、“ 行 
距 ” 为 “自动 ”、“ 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 255、0、0 ) ， 
如 图 9-104 所 示 。 

9 STEP 06 输入 相应 文本 并 调整 至 合 过 位 乓 ， 效果 如 图 9-105 所 示 。 


虱 x 

字符 ”段落 至 

| | 方正 综 艺 简 体 | 

如 56.77 点 “| 垃 自动 

vA 0 v 0 

设置 | | 0o% 
:tT 100% 工 loo% | 

ss 


fiecrdt AaaT lt 
美国 英语 v| aa | 平湖 
图 9-103 ”输入 文本 图 9-104 设置 字符 选项 图 9-105 输入 文本 
9 STEP 07 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 56.77 点 、“ 行 距 ” 


为 “自动 、“ 所 选 字 符 的 字 距 调整 ”为 0 “颜色 ”为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 9-106 所 示 。 

9 STEP 08 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-107 所 示 。 

9 STEP 09 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 综 亏 简体”、“ 字 体 大 小 ”为 56.77 点 、“ 行 
距 ” 为 “自动 ”、“ 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 255、0、0 ) ， 
如 图 9-108 所 示 。 

9 STEP 10 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-109 所 示 。 

9 STEP 11 在 “字符 ”面板 中 设置 “字体 系列 ”为 “楷体 ”、“ 字 体 大 小 "为 10 点 、“ 行 距 ` 为 “自动 ”、 

“所 选 字 符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 黄色 ( RGB 参 数值 分 别 为 255、255、0 ) ， 如 图 9-110 所 示 。 


Photoshop 
HHD 广 告 设 计 


9 STEP 12 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-111 所 示 。 


44 Xx 4 x 

字符 段落 三 字符 ”段落 三 
方正 综艺 简体 “| | 方正 综艺 简体 。 | | - : 
uF 56.77 占 v | 1 全 (自动 ) v 吁 56.77 点 “| 1 全 自动 ) ~ : 
vA AE | Van “ 四 | 
殉 0% 痢 0%% ~ : 
IT 1T 100% : 
入 “三 z 


人 0 
美国 英语 v aa 平 骨 美国 英语 
图 9-106 设置 字符 选项 图 9-107 输入 文本 图 9-108 设置 字符 选项 
4 x 
字符 国王 三 
要 本 “|- 
Tw 点 ~ 垃 掏 ”~ 
VA Do VA “| 
E 0% | 


美国 英语 v| aa | 平滑 
图 9-109 输入 文本 图 9-110 设置 字符 选项 图 9-111 输入 文本 


9 STEP 13 在 “字符 ”面板 中 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 14 点 、“ 行 距 ” 为 “ 自 
动 ”、“ 所 选 字符 的 字 距 调整 ”为 0(、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 9-112 所 示 。 
e STEP 14 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 9-113 所 示 。 


要 和 Xx 
| 黑体 
iTI 14 点 “| 失 | 自动 
| > “0 “| 
1X Ls | 
| 沿 ! 0% 。 问 
‘tT 100% L100% | | 
,名 0 点 me:[ | n 


SS 惕 姓名 : 龙 小 云 和 
est aa 人 lS 六 求职 意向 : 设计 总 监 输入 
联系 电话 : 13502043638 


图 9-112 设置 字符 选项 图 9-113 输入 文本 
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9.3.3 ”设计 个 人 简历 光斑 点 组 效果 


为 了 迎合 背景 舞台 揭幕 灯光 的 效果 ， 适 当 在 文字 上 方 添加 光斑 点 级 ， 可 以 为 页 面 
增添 不 少 色 彩 。 下 面 详细 介绍 设计 个 人 简历 光斑 点 缀 效果 的 方法 。 其 操作 步骤 如 下 。 

9 STEP 01 在 “图 层 ” 面板 下 方 ， 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 
选取 工具 箱 中 的 画笔 工具 ， 在 工具 属性 栏 中 打开 “ 国 笔 预 设 ” 选 取 器 ， 设 置 “ 大 小 ”为 150 像 素 、“ 硬 
度 ” 为 0， 选 取 “ 弟 规 男 笔 ”中 的 “ 柔 边 圆 ”， 在 图 像 编辑 窗口 中 国 一 个 白色 圆 点 ， 效 果 如 图 9-114 所 示 。 

9 STEP 02 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 为 圆 点 自由 变形 ， 并 按 Enter 键 确认 变换 ， 效 果 如 
图 9-115 所 示 。 

9 STEP 03 在 “图 层 ” 面 板 中 ， 选 中 “图 层 1” 图 层 ， 按 Ctrl 十 J 组 合 键 ， 复 制 得 到 “图 层 1 拷贝 ”图 
层 ， 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 在 工具 属性 栏 中 ， 设 置 “ 旋 转 ” 为 60 度 ， 按 Enter 键 确认 旋 
转 ， 效 果 如 图 9-116 所 示 。 


口 FH 
扫 各 站 视 频 


图 9-114 绘制 圆 点 图 9-115 ”调整 圆 点 图 9-116 复制 旋转 图 像 
9 STEP 04 选中 “图 层 1 拷贝 ”图 层 ， 按 Shift 十 Ctrl 十 Alt 十 T 组 合 键 ， 重 复 上 一 步 操 作 ， 得 到 “图 层 1 
拷贝 2?” 图 层 ， 效 果 如 图 9-117 所 示 。 
9 STEP 05 选取 工具 箱 中 的 国 笔 工具 ， 在 图 像 编 辑 窗口 中 的 适当 位 置 男 一 个 圆 点 ， 效 果 如 图 9-118 所 示 。 
9 STEP 06 在 “图 层 ” 面 板 中 ， 按 住 Shift 键 的 同时 ， 选 中 “图 层 1” “图 层 1 拷贝 ”和 “图 层 2 
2”3 个 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “ 合 并 图 层 ” 命 令 ， 将 3 个 图 层 合 并 ， 得 到 
“图 层 1 找 贝 2 ”图 层 ， 如 图 9-119 所 示 。 


村 
由 
下 


关口 G@ 锯 避 和 侧 


图 9-117 重复 上 一 步 操 作 图 9-118 绘制 圆 点 图 9-119 合并 图 层 


Photoshop 


上 H2 广 告 设 计 


9 STEP 07 选择 “ 滤 镜 ”|“ 模 糊 ”|“ 高 斯 模糊 ”命令 ， 在 弹出 的 “高 斯 模糊 ”对 话 框 中 设置 “半径 ” 
为 1.5 像 素 ， 然 后 单 击 “ 确 定 ” 按 钮 为 图 层 添加 高 斯 模糊 滤 镜 ， 效 果 如 图 9-120 所 示 。 

9 STEP 08 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 9-121 所 示 。 

9 STEP 09 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 拒 “ 图 层 1 拷贝 2” 图 层 所 对 应 的 图 像 至 合适 位 
置 ， 得 到 “图 层 1 拷贝 3” 图 层 ， 效 果 如 图 9-122 所 示 。 


图 9-120 ”添加 滤 镜 图 9-121 调整 图 像 图 9-122 ” 拖 旨 复制 图 像 
9 STEP 10 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
白色 ( RGB 参 数值 均 为 255 ) 、“ 摘 边 ” 为 无 、“ 粗 细 ” 为 5 像素 ， 在 图 像 编 辑 窗 口中 的 适当 位 置 绘制 
一 条 直线 ， 效 果 如 图 9-123 所 示 ， 得 到 “形状 1” 图 层 。 


ae et 
家 指 碟 ) 修 , 接 住 Shif 键 ， 可 以 强制 直线 按 术 平 、 委 直 或 者 450 方向 绘制 。 另 外 ， 还 可 以 选 
。 取 工 具 箱 中 的 钢笔 工具 绘制 直线 。 : 


9 STEP 11 在 图 像 编 辑 窗 口中 ， 按 住 Alt 键 的 同时 ， 拖 蝶 “ 形 状 1” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 得 到 
“形状 1 拷贝 ”图 层 ， 效 果 如 图 9-124 所 示 。 

9 STEP 12 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 蝶 “ 形 状 1 拷贝 ”图 层 所 对 应 的 图 像 至 合适 位 
置 ， 得 到 “形状 1 拷贝 2” 图 层 ， 效 果 如 图 9-125 所 示 。 
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图 9-124 拖 瘟 复制 图 像 图 9-125 拖 虽 复制 图 像 
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9 STEP 13 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 在 “图 层 ” 面板 中 ， 设 置 
“形状 1 找 贝 2” 图 层 的 “不 透明 度 ” 为 79%， 效 果 如 图 9-126 所 示 。 

9 STEP 14 在 图 像 编辑 窗 口中 ， 按 住 Alt 键 的 同时 ， 拖 忠 “ 形 状 1” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 得 到 
“形状 1 找 贝 3” 图 层 ， 然 后 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适当 调整 图 像 大 小 ， 效 果 如 图 9-127 
所 示 。 


图 9-126 调整 图 像 图 9-127 拖 旨 复制 图 像 

9 STEP 15 在 “图 层 ” 面板 下 方 ， 单 击 “ 创 建新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 选 取 工 具 箱 中 
的 画笔 工具 ， 在 工具 属性 栏 中 打开 “画笔 预 设 ” 选 取 器 ， 设 置 “ 大 小 ”为 175 像 素 ， 选 取 “ 圆 形 素描 
圆珠笔 1 ( 画笔 工具 ) ”， 在 图 像 编 辑 窗口 中 ， 男 三 个 白色 圆 点 ， 效 果 如 图 9-128 所 示 。 

9 STEP 16 选择 “ 滤 镜 ”|“ 模 糊 ”|“ 动 感 模糊 ”命令 ， 在 弹出 的 “动感 模糊 ”对 话 框 中 设置 “角度 ” 
为 25 度 、“ 距 离 ” 为 2000 像 素 ， 如 图 9-129 所 示 。 

9 STEP 17 单 击 “确定 ”按钮 为 图 层 添 加 动感 模糊 效果 ， 效 果 如 图 9-130 所 示 。 至 此 ， 完 成 个 人 简历 的 
H5 页 面 设计 。 


图 9-128 ”绘制 圆 点 图 9-129 ”设置 动感 模糊 图 9-130 ”添加 滤 镜 


企业 宣传 是 为 了 提升 企业 形象 ， 让 外 界 对 企业 有 一 个 统一 的 认识 ， 在 提升 
增强 信任 感 ， 从 而 市 


企业 形象 的 同时 也 可 以 提升 企业 知名 度 ， 传 递 企 业 信 息 ， 


来 商机 。 


会 议 宣传 : 掌握 商务 汇报 的 H5 页 面 设计 
公司 简介 : 掌握 公司 介绍 的 H5 页 面 设计 
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om i 证" 二 a SE 
~ EP Pee ~ 
务 汇 “He ee 
如 加 


Business Report ] . 


图 书 编辑 部 门 


新 亚 文 化 出 版 社 


第 10 章 “企业 宣传 : 品牌 介绍 的 HS 广告 设计 


由 4 岂 目 会 议 宣传 : 掌握 商务 汇报 的 H5 页 面 设计 


商务 汇报 是 指定 期 对 各 项 商务 业务 活动 进行 的 分 析 评 价 ， 能 够 及 时 发 现 业务 活动 中 出 现 的 问题 和 
存在 的 不 足 ， 以 便 调 整修 正 工 作 计 划 和 措施 。 
本 实例 的 最 终 效果 如 图 10-1 所 示 。 


图 书 编辑 部 门 


图 10-1 实例 效果 


素材 文件 pd 


10.1.1 设计 商务 汇报 页 


商务 汇报 的 背景 效果 一 定 要 沉稳 大 气 ， 一 个 企业 的 广告 宣传 的 效果 ， 与 背景 的 设 
计 有 很 大 关系 。 下 面 详 细 介 绍 制 作 商 务 汇报 页 面 背 景 效 果 的 方法 。 其 操作 步骤 如 下 。 口 马 四 二 
9 STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@@ 设 置 “ 名 称 ” 为 扫 码 着 视 频 
“掌握 商务 汇报 H5 页 面 设 计 ”、 “宽度 ”为 1080 像 素 、 “高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 / 英 
寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 10-2 所 示 ; 人 @ 单 击 “ 创 建 ”按钮 ， 新 建 一 
个 空白 图 像 。 
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图 10-2 设置 “新 建 ” 对 话 框 


Photoshop 


H5 广 告 设 计 


9 STEP 02 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 人 @ 在 渐变 条 上 设置 栖 色 到 黄色 的 渐 
变 ( RGB 参数 值 分 别 为 232、97、4; 254、173、1 ) ; 四 单 击 “新 建 ”按钮 ， 新 建 渐 变 预 设 ， 如 图 10-3 
所 示 。 

9 STEP 03 选取 工具 箱 中 的 珑 形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 渐变 ， 和 加 在 “渐变 ”选项 区 中 选 
择 新 建 的 林 色 到 黄色 的 渐变 色 ; 四 设置 “ 描 边 ”为 无 、“ 旋 转 渐变 ”为 132， 如 图 10-4 所 示 。 

e STEP 04 在 图 像 编辑 窗口 中 拖 动 矩形 工具 绘制 一 个 渐变 矩形， 得 到 “和 珑 形 1” 图 层 ， 效 果 如 图 10-5 
所 示 。 


站 回 


TT 


位 置 (C): |100 % 


编 汶 : 100 ”~v % 图 与 图 层 对 齐 


图 10-3 新建 渐 变 预 设 图 10-4 选择 渐变 色 图 10-5 ”绘制 渐变 矩形 
9 STEP 05 选取 工具 箱 中 的 直接 选择 工具 ， 选 中 渐变 矩形 控制 框 右上 角 的 销 点 ， 如 图 10-6 所 示 。 
9 STEP 06 按 Delete 键 删除 销 点 ， 并 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 
如 图 10-7 所 示 。 
9 STEP 07 展开 “图 层 ” 面 板 ， 复 制 “ 和 矩形 ”图 层 ， 得 到 “和 矩形 拷贝 ”图 层 ， 按 Ctrl 十 T 组 合 键 调 出 变 
换 控 制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 然 后 旋转 一 定 的 角度 ， 在 “图 层 ” 面 板 中 ， 拖 动 “ 和 矩形 拷贝 ” 
图 层 至 “和 矩 形 ” 图 层 下 方 ， 效 果 如 图 10-8 所 示 。 


图 10-6 选中 锚 点 图 10-7 ”删除 锚 点 并 调整 图 像 图 10-8 复制 调整 图 像 
9 STEP 08 在 图 像 编 辑 窗口 状态 下 ， 用 鼠标 左 键 单 击 “ 和 矩形 ”图 层 ， 按 住 Alt 键 的 同时 ， 拖 动 到 合适 的 
位 置 ， 得 到 “和 矩 形 拷贝 2” 图 层 ， 效 果 如 图 10-9 所 示 。 


加 


yr) ”在 Photoshop CC 2018 工 作 界 面 中 ， 只 要 用 鼠标 左 键 单 击 图 像 或 图 层 ， 然 后 按 
: ′ 住 Alt 键 拖 动 图 像 或 图 层 便 可 以 进行 复制 ; 也 可 以 通过 选中 图 像 或 图 层 ， 运用 快捷 
: 键 Ctrl 十 J， 进 行 原 位 复制 粘贴 ， 再 将 图 像 移动 到 合适 位 置 。 


e STEP 09 展开 “图 层 ” 面 板 ， 选 择 “ 和 矩形 拷贝 2” 图 层 ， 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适当 调 
整 图 像 大 小 及 位 置 ， 并 填充 为 暗 蓝 色 ( RGB 参 数值 为 0、89、130 ) ， 效 果 如 图 10-10 所 示 。 

e STEP 10 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 分 别 拖 蝶 暗 蓝 色 和 矩形 控制 框 上 的 三 个 销 点 至 合适 的 位 置 ， 改 
变 图 形 形 状 ， 效 果 如 图 10-11 所 示 。 


图 10-9 复制 图 像 图 10-10 调整 填充 图 像 图 10-11 拖 动 锚 点 


10.1.2 设计 商务 汇报 主题 内 众 效 果 


商务 汇报 的 内 容 一 定 要 突出 时 间 、 公 司 、 所 在 部 门 以 及 汇报 人 等 信息 ， 不 宜 过 
多 ， 点 明 主 题 即 可 。 下 面 详细 介绍 制作 商务 汇报 主题 内 容 效 果 的 方法 。 其 操作 步 又 
如 下 。 

9 STEP 01 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 暗 蓝 色 ( RGB 参数 值 为 0、 89、 
130 ) ，“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗 口中 绘制 一 个 和 矩形， 效果 如 图 10-12 所 示 。 

9 STEP 02 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 人 命令， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “方正 楷体 简体 ”、“ 字 体 大 小 ”为 12.06 点 、“ 行 距 ” 为 22.03 点 、“ 设 置 所 选 字 
符 的 字 距 调整 ”为 90、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 235 ) ， 如 图 10-13 所 示 。 

9 STEP 03 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 10-14 所 示 。 


e STEP 04 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 超 粗 黑 简体 ”、 “字体 大 小 ”为 32.34 氮 、 
行距 ”为 23.75$ 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 390、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参 数值 为 0、89、 


130 ) ， 如 图 10-15 所 示 。 
9 STEP 05 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 10-16 所 示 。 


9 STEP 06 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 30 点 、“ 行 距 ” 为 22.03 
点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 50、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参 数值 0、89、130 ) ， 并 激活 仿 粗 


体 图 标 ， 如 图 10-17 所 示 。 


/由 
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图 10-12 ”绘制 矩形 


[ 44 时 
字符 段落 三 
1 -1 
; 方正 超 粗 黑 简体 ~ ~ 
IT 32.34 点 vv| 过 |23.75 点 ~ 
VA 0 v 50 v 


美国 英语 vaa 锐利 ~ 

图 10-15 设置 各 选项 
9 STEP 07 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 10-18 所 示 。 
9 STEP 08 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 楷体 简体 ”、“ 字 体 大 小 ”为 18.28 点 、 


“行距 ”为 13.42 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 50、 


130 ) ， 如 图 10-19 所 示 。 


字符 段落 
方正 彬 体育 体 。 ~ 
IT 12.06 点 v1 全 22.03 点 


1 
1 
VA 0 v 50 
| 


美国 英语 v| aa | 锐利 
图 10-13 ”设置 各 选项 


图 10-16 输入 相应 文本 


9 STEP 09 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 10-20 所 示 。 


图 10-18 输入 相应 文本 


44 其 

字符 | 段落 三 
| steelatn sl 
方正 楷体 简体 v v 
E E 
IT 18.28 点 ~ 过 13.42 点 ~ 
E ' 
VAD VAEn v 
:1 00% | 
| | 
1 1 


美国 英语 
图 10-19 设置 各 选项 


-网 ww ~ 


图 10-17 设置 各 选项 


“颜色 ”为 暗 蓝 色 ( RGB 参数 值 0、89、 
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图 10-20 输入 相应 文本 


第 10 章 “企业 宣传 : 品牌 介绍 的 H5 广 告 设计 


9 STEP 10 按 Ctrl 十 O 组 合 键 ， 打 开 “ 标 志 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 辑 
窗口 中 ， 适 当 调 整 图像 的 位 置 ， 效 果 如 图 10-21 所 示 。 


i 在 Photoshop CC 2018 工 作 界 面 中 ， 使 用 “图 层 样式 ”可 以 为 当前 图 层 添加 特 
过 条 拥 也， 殊 效 果 ， 如 投影 、 内 阴影 、 外 发 光 、 浮 雕 等 样式 ， 可 以 使 整 幅 图 像 更 加 富有 真实 感 
和 突出 性 。 双 击 所 需 图 层 ， 可 以 弹出 “图 层 样式 ”对 话 框 ， 进 行 参数 设置 。 
也 可 以 在 “图 层 ”面板 底部 单 击 “ 添 加 图 层 样式 ”按钮 所 ， 在 弹出 的 列表 框 中 选择 所 需 的 图 


e@ STEP 11 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ，@@ 设 
置 “ 字 体系 列 ” 为 “方正 楷体 简体 ”、“ 字 体 大 小 ”为 12.94 点 、“ 行 距 ” 为 23.75 点 、“ 设 置 所 选 字符 
的 字 距 调整 ”为 30、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参数 值 0、89、130 ) ; 输入 相应 文本 ， 并 调整 至 合适 
人 位置， 效果 如 图 10-22 所 示 。 


9 STEP 12 在 “字符 ”面板 中 ， 和 设置 “字体 系列 ”为 “方正 楷体 简体 ”、 “字体 大 小 ”为 12 点 、“ 行 
距 ” 为 22.03 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 50、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ; @ 输 入 


相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 10-23 所 示 。 


C 
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图 10-21 拖 息 图像 图 10-22 ”输入 相应 文本 图 10-23 ”输入 相应 文本 


10.13 设计 商务 汇报 育 景 交 饰 效 果 


商务 汇报 如 果 插 入 太 多 生硬 的 信息 ， 便 会 使 页 面 显得 呆板 ， 适 当 制作 一 些 装饰 效 号 多 

果 ， 会 使 整个 页 面 更 加 完美 。 下 面 详细 介绍 设计 商务 汇报 背景 装饰 效果 的 方法 。 其 操 “ 国 味 则 各 全 

作 步 又 如 下 。 扫 码 看 视频 

9 STEP 01 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 白色 ( RGB 参 数值 均 为 255 ) 、 

“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 中 绘制 一 条 直线 ， 按 Ctl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调整 位 置 及 
大 小 ， 效 果 如 图 10-24 所 示 。 


| 


Photoshop 


H5 广 告 设 计 


e STEP 02 选取 工具 箱 中 的 圆 角 珑 形 工具 ， 人 在 工具 属性 栏 中 设置 “填充 ”为 暗 蓝 色 ( RGB 参数 值 为 
0、89、130 ) 、“ 描 边 ” 为 无 、“ 圆 角 半 径 ” 均 设 为 86 像 素 ;， 四 在 图 像 编 辑 窗口 中 绘制 一 个 圆 角 甜 
形 ， 效 果 如 图 10-25 所 示 。 
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de 
各 
儿 区 下 矿 
OE > 
lows -Tl D L 
而 | r+ 田 
图 10-24 ”绘制 直线 图 10-25 ”绘制 圆 角 和 珑 形 


9 STEP 03 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 展 开 “ 图 层 ” 面板 ， 将 “ 圆 
角 和 矩形 1” 图 层 拖 护 至 “和 珑 形 ” 图 层 下 方 ， 效 果 如 图 10-26 所 示 。 

@ STEP 04 选取 工具 箱 中 的 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 暗 蓝 色 ( RGB 参数 值 为 0、 
89、130 ) 、“ 描 边 ”为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形 ， 得 到 “ 甜 形 001” 图 层 ， 效 果 如 
图 10-27 所 示 。 


图 10-26 ”调整 圆 角 和 矩形 图 10-27 绘制 矩形 
9 STEP 05 按 住 Alt 键 ， 拖 动 “和 矩形 001” 图 层 ， 复 制 得 到 “ 甜 形 001 捞 贝 ”图 层 ， 在 工具 属性 栏 中 设置 
“填充 ”为 无 、“ 描 边 ”为 白色 ( RGB 参 数值 均 为 255 ) 、“ 像 素 ” 为 4， 并 适当 调整 图 像 位 置 ， 效 果 
如 图 10-28 所 示 。 
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9 STEP 06 按 住 Shift 键 ， 同 时 选取 “和 矩 形 001”“ 和 矩形 001 拷贝 ”图 层 ， 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 
框 ， 适 当 调整 图 像 位 置 及 大 小 ， 并 旋转 一 定 角度 ， 按 Enter 键 确认 变换 ， 效 果 如 图 10-29 所 示 。 

9 STEP 07 按 住 Shift 键 ， 同 时 选取 “和 矩形 001”“ 和 矩形 001 拷贝 ”图 层 ， 按 住 Alt 键 拖 动 图 像 ， 得 到 两 个 
“矩形 001 找 贝 2” 图 层 ， 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 
键 确 认 变换 ， 效 果 如 图 10-30 所 示 。 


图 10-28 调整 复制 图 像 图 10-29 调整 拖 慢 图 像 图 10-30 调整 复制 图 像 

9 STEP 08 按 住 Shift 键 ， 同 时 选取 两 个 “和 矩形 001 拷贝 2” 图 层 。 然 后 按 住 Alt 键 同时 ， 用 移动 工具 拖 电 
选 图 层 的 图 像 至 合适 位 置 ， 得 到 两 个 “和 珑 形 001 拷贝 3” 图 层 。 选 择 下 方 “和 珑 形 001 撕 贝 3” 图 层 ， 
右键 栅 格 化 图 层 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “ 图 层 ” 面板 中 栅 格 化 的 “和 矩形 001 乒 贝 3” 的 
图 层 缩 览 图 ， 将 “和 矩形 001 拷贝 3” 图 层 载 入 选区 ， 如 图 10-31 所 示 。 

@ STEP 09 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 选 择 新 建 的 橙色 到 黄色 的 渐变 预 
设 ， 在 选区 内 从 右 下 角 至 左上 角 填 充 线性 渐变 ， 并 取消 选区 ， 效 果 如 图 10-32 所 示 。 

e STEP 10 按 住 Shift 键 ， 同 时 选取 两 个 “和 矩形 001 拷贝 3” 图 层 。 然 后 按 住 Alt 键 的 同时 ， 用 移动 工具 
拖 蝶 所 选 图 层 的 图 像 至 合适 位 置 ， 得 到 两 个 “和 矩 形 001 拷贝 4” 图 层 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 
框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 果 如 图 10-33 所 示 。 至 此 ， 完 成 商务 汇报 H5 
页 面 设计 。 


填充 


图 10.31 载 入 选区 图 10-32 填充 线性 渐变 图 10-33 复制 调整 图 像 
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公司 简介 : 掌握 公司 介绍 的 H5 页 面 设计 


公司 介绍 是 公司 对 外 传播 的 信息 ， 简 单 明 了 的 介绍 ， 能 够 使 外 界 清楚 明白 地 了 解 公司 。 好 的 公司 
介绍 ， 不 仅 要 有 文字 介绍 ， 还 要 有 一 个 好 看 的 版 面 设 计 。 
本 实例 的 最 终 效果 如 图 10-34 所 示 。 


图 10-34 ”实例 效果 
素材 文件 | 素材 \ 第 10 章 \ 主 题 图 .jpg、 插 图 1.jpg、 插 图 2.jpg、 插 图 3.jpg 
效果 文件 | 效果 \ 第 10 章 \ 掌 握 公 司 介绍 H5 页 面 设计 .psd、 掌 握 公 司 介绍 H5 页 面 设计 .jpg 


10.2.1 设计 公司 介绍 痛 景 色 块 效果 


设计 一 个 好 的 背景 效果 ， 不 仅 要 有 好 的 色彩 或 图 片 搭配 ， 更 为 重要 的 是 要 与 公司 “ 旦 忒 国 和 
性 质 相 吻合 。 下 面 详细 介绍 制作 公司 介绍 背景 色 块 效果 的 方法 。 其 操作 步骤 下 。 Te 
e STEP 01 选择 “文件 ” |“ 新建” 命令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “名称 ” ” 扫 码 看 视频 
为 “掌握 公司 介绍 H5 页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ”为 1920 像 素 、“ 分 辨 率 ”为 300 
像素 /英寸 、“ 颜 色 模 式 ” 为 “RGB 颜色 ”、“ 青 景 内 容 ” 为 “和 白色 ”， 如 图 10-35 所 示 ; 人 @ 单 击 “ 创 
建 ”按钮 ， 新 建 一 个 空白 图 像 。 
9 STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “ 主 题 图 .jpg” 素 材 图 像 ， 解 锁 图 层 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 
景 图 像 编辑 窗口 中 ， 并 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 ， 将 图 层 命 名 为 “主题 
图 ”， 效 果 如 图 10-36 所 示 。 
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图 10-35 设置 “新 建 ” 对 话 杠 图 10-36 ” 拖 旨 图 像 

9 STEP 03 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 深 褐色 ( RGB 参数 值 分 别 为 
106、57、6 ) 、“ 摘 边 ” 为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 矩形 ， 并 按 Enter 键 确认 绘制 ， 效 果 如 
图 10-37 所 示 。 

9 STEP 04 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 浅 褐色 ( RGB 参 数值 分 别 为 
178、136、80 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 和 矩形， 并 按 Enter 键 确认 ， 效 果 如 图 10-38 
所 示 。 

e STEP 05 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 暗 米色 ( RGB 参 数值 分 别 为 
209、192、165 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形 ， 并 按 Enter 键 确认 ， 效 果 如 图 
10-39 所 示 。 


图 10-37 绘制 深 袜 色 和 矩形 图 10-38 ”绘制 浅 褐 色 算 形 图 10-39 ”绘制 瞳 米色 和 矩形 


10.2.2 ”设计 公司 介绍 图 片 文子 效果 


公司 介绍 中 的 内 容 要 注意 关键 点 ， 例 如 公司 名 称 、 关 于 公司 、 公 司 产品 以 及 联系 
方式 等 。 下 面 详 细 介 绍 设计 公司 介绍 图 片 文字 效果 的 方法 。 其 操作 步骤 如 下 。 
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eSTEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 插 图 1.jpg” 素 材 图 像 ， 解 锁 图 层 ， 用 移动 工具 将 素材 图 像 拖 电 
景 图 像 编 辑 窗口 中 ， 并 按 Ctrl 十 T 组 合 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 位 置 及 大 小 ， 效 果 如 图 
10-40 所 示 。 

9 STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “ 插 图 2.jpg” 素材 图 像 ， 解 锁 图 层 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 
景 图 像 编 辑 窗 口中 ， 并 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 效 果 如 

图 10-41 所 示 。 
9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “ 揪 图 3.jpg” 素 材 图 像 ， 解 锁 图 层 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 
景 图 像 编 辑 窗 口中 ， 并 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 效 果 如 

图 10-42 所 示 。 


Bw a 
图 10-40 ” 拖 惫 图 像 图 10-41 拖 惫 图 像 图 10-42” 拖 惫 图 像 
9 STEP 04 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ” |“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ，@@ 设 
置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 18 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调 


整 ” 为 30、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; 四 激活 仿 粗 体 图 标 ， 如 图 10-43 所 示 。 
9 STEP 05 输入 相应 文本 并 适当 调整 位 置 ， 效 果 如 图 10-44 所 示 。 


44 里 

字符 ”段落 历史 记录 至 

黑体 sw 一 sw ! 

PT 18 点 “| 夫 | 人 自动 ”|v| 

iV/A 0 v 50 v ! 

OO 设置 I | 
EJ : 

:tT 100% I 100% | 
a el 


美国 英语 vaa 锐利 ~ 加 - 
图 10-43 ”设置 字符 选项 图 10-44 输入 文本 
© STEP 06 在 “字符 ” 面板 中 ， 人 OO 设置 “字体 系列 ” | “楷体 ” 0 pT “行距 ” 为 


“自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 50、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; 四 激活 仿 


Ib 
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粗 体 图 标 ， 如 图 10-45 所 示 。 

9 STEP 07 输入 相应 文本 并 适当 调整 位 置 ， 效 果 如 图 10-46 所 示 。 

9 STEP 08 在 “字符 ”面板 中 ， 引 设置 “字体 系列 ”为 “楷体 ”、“ 字 体 大 小 ”为 6.69 点 、“ 行 距 ” 为 
10 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 50、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; 四 激活 仿 粗 体 
图 标 ， 如 图 10-47 所 示 。 


<# XX 

字符 段落。 历史 记录 字符 段落。 历史 记录 三 

， 模 体 “| - ! 模 体 v ~|! 

GT 9 点 v 夫 自动 TI 6.6e 点 vv 垃 1 点 “| 
rr Jam MAD “四 a 
各 设置 六 > ! | 
| 二! 0% ~ | 二 |0% ~ 

站 100% L100% | | 100% 工 10o% | 
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人 oO 寻 岂 大 下]1s 纺 
美国 英语 ~ aa 名利 - 美国 英语 vaa 锐利 ~ 
图 10-45 设置 字符 选项 图 10-46 输入 文本 图 10-47 设置 字符 选项 
@ STEP 09 输入 相应 文本 并 适当 调整 位 置 ， 效 果 如 图 10-48 所 示 。 
9 STEP 10 按 住 Shift 键 的 同时 ， 选 取 3 个 文字 图 层 ， 按 Ctrl 十 G 组 合 键 ， 进 行 图 层 编组 ， 将 编组 得 到 的 图 
层 命 名 为 “文字 组 1”， 如 图 10-49 所 示 。 
9 STEP 11 双击 “文字 组 1” 图 层 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 选 中 “投影 ” 复 选 框 ， 设 置 “ 混 合 模 
式 ” 为 “正片 番 底 ”、“ 不 透明 度 ” 为 32%、 “角度 ”为 90 度 、“ 距 离 ” 为 4 像素 、“ 扩 展 ” 为 8%， 
单 击 “确定 ”按钮 为 图 层 添加 图 层 样 式 ， 效 果 如 图 10-50 所 示 。 
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绣 去 科技 有 限 公司 
| - 
日 Bw 四 
图 10-48 输入 文本 图 10-49 文字 图 层 编组 图 10-50 添加 图 层 样式 


9 STEP 12 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “楷体 ”、“ 字 体 大 小 ”为 18 点 、“ 行 距 ” 为 “ 自 
动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 90、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 人 

9 STEP 13 输入 相应 的 3 个 文本 ， 并 分 别 调整 至 合适 位 置 ， 效 果 如 图 10-52 所 示 。 

9 STEP 14 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ” 为 白色 ( RGB 人 参数 
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值 均 为 255 ) 、“ 像 素 ” 为 5， 在 图 像 编辑 窗口 中 绘制 一 个 和 矩形， 得 到 “和 矩形 4” 图 层 ， 适 当 调 整 图 像 
大 小 及 位 置 ， 效 果 如 图 10-53 所 示 。 


3 就 
字符 段落 历史 记录 三 
| 档 体 ~ v | 
5 18 氮 v| 夫 自动 “| 
IVA 0 50 v ! 
| 过 0% ~ 
iT 100% . 工 100% 和 
Ls ! 了 上 
Ia*+ 0 点 颜色 : | | 产品 介绍 。 哇 \'| 国 :1 
= 
美国 英语 v aa 锐利 > 
图 10-51 设置 字符 选项 图 10-52 输入 文本 图 10-53 ”绘制 矩形 


9 STEP 15 在 “字符 ”面板 中 ，@ 设 置 “ 字 体系 列 ” 为 “楷体 ”、“ 字 体 大 小 ”为 10.43 点 、“ 行 距 ” 
为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 30、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; @ 在 相 
应 人 A 


二 有 i Ce ,2018 工 作 界面 中 ， 文字 工具 是 工具 箱 中 最 党 用 的 一 _ 种 工具 ， 
: | 专家 指 "> 在 很 多 设计 作品 尤其 是 商业 作品 中 不 可 或 缺 ， 通 过 对 文字 进行 编排 与 设计 ， 不 但 能 
_ 够 更 加 有 效 地 表现 设计 主题 ， 而 且 可 以 对 图 像 起 到 美化 作用 。 。 


e STEP 16 按 住 Shif 键 ， 同时 选取 “和 矩形 4” 图 层 和 ENTER 文 本 图 层 ， 和 拖 昌 图 层 至 合适 的 位 
置 ， 得 到 “和 矩 形 4 拷贝 ”图 层 和 “ENTER 拷贝 ”文本 图 层 ， 效 果 如 图 10-55 所 示 。 

9 STEP 17 按 住 Shift 键 ， 同 时 选取 “和 矩形 4 拷贝 ”图 层 和 “ENTER 拷贝 ”文本 图 层 ， 按 住 Alt 键 拖 

蝶 图 层 至 合适 的 位 置 ， 得 到 “和 矩形 4 拷贝 2” 图 层 和 “ENTER 拷贝 2?” 文本 图 层 ， 效 果 如 图 10-56 


所 示 。 
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图 10-54 输入 文本 图 10-55 复制 拖 提 图 像 图 10-56 复制 拖 旨 图 像 
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10.2.3 “设计 公司 介绍 


ea lean 一 定 要 适当 融入 公司 特色 ， 不 要 过 于 偏执 地 使 用 文字 和 号 
图 片 进行 公司 宣传 。 下 面 详细 介绍 设计 公司 介绍 文字 装饰 效果 的 方法 。 其 操作 步 双 回 :二 
如 下 。 
9 STEP 01 展开 “图 层 ” 面 板 ， 选 择 “ 主 题 图 ”图 层 ， 选 择 “ 图 像 ”| “; 
整 ” |“ 曲线 ”人 命令， 弹出“ 曲线” 对话 框 ， A 
新 建 一 个 控制 点 ，@ 在 下 方 设置 “输入 ”为 147、“ 输 出 ”为 216， 单 击 
“确定 ”按钮 调整 曲线 ， 效 果 如 图 10-57 所 示 。 
9 STEP 02 选择 “窗口 ” |“ 调整 ”命令 ， 展 开 “ 调 整 ”面板 ， 在 其 中 单 击 
“自然 饱和 度 ” 按 钮 ， 在 属性 面板 中 设置 “自然 饱和 度 ” 为 42、“ 饱 和 
度 ” 为 27， 效 果 如 图 10-58 所 示 。 
9 STEP 03 展开 “图 层 ” 和 面板， 选择“ 自然 饱和 度 ” 图 层 ， 在 图 层 上 方 
新 建 一 个 “主题 文字 阴影 ”图 层 。 选 取 工 具 箱 中 的 矩形 工具 ， 在 工具 
属性 栏 中 设置 “填充 ”为 黑色 ( RGB 参数 值 均 为 0 ) 、“ 描 边 ” 为 和 白色 
( RGB 参 数值 均 为 255 ) 、 “像素 ” 为 1， 在 “图 层 ” 面 板 中 设置 图 层 
的 “不 透明 度 ” 为 10%， 在 图 像 编 辑 窗口 中 绘制 一 个 窍 形 ， 并 按 Ctrl 十 
TI 组 合 键 调 出 变换 控制 框 ， 适 当 调整 矩形 大 小 及 位 置 ， 效 果 如 图 10-59 
二 图 10-57 调整 “曲线 ” 
9 STEP 04 新 建 一 个 “和 矩 形 边框 ”图 层 ， 选 取 工 具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 
无 、“ 摘 边 ” 为 和 白色 ( RGB 参 数值 均 为 255 ) 、“ 像 素 ” 为 2， 在 图 像 编 辑 窗口 中 绘制 一 个 和 矩形， 如 
图 10-60 所 示 。 
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图 10-58 ”调整 “自然 饱和 度 ” 图 10-59 ”绘制 矩形 图 10-60 ”绘制 矩形 
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9 STEP 05 双击 “和 珑 形 边框 ”图 层 ， 弹 出 “图 层 样式 ”对 话 框 ，@@ 选 中 “投影 ” 复 选 框 ; 四 设置 “混合 
模式 ”为 “正片 琶 底 ”、“ 阴 影 颜色 ”为 黑色 ( RGB 参数 值 均 为 0 ) 、“ 不 透明 度 ” 为 32%、 “角度 ” 
为 90、“ 距 离 ” 为 4 像素 、“ 扩 展 ”为 8%、“ 大 小 ”为 0 像素 ， 如 图 10-61 所 示 。 

9 STEP 06 单 击 “确定 ”按钮 ， 即 可 添加 投影 图 层 样 式 ， 效 果 如 图 10-62 所 示 。 至 此 ， 完 成 公司 介绍 的 
H5 页 面 设计 。 


i 
! 不 遂 明 度 (oO): 


_O 新 建 样式 (W).,。 ) 
-I 1 
角度 {Aj: ( 2 ie 度 4 读 用 全 局 光 (G) ! 预览 (V) 


中 高 (D): 让 4 者 束 
扩展 {R): 区 8 % 
大 小 {5): 侈 壶 
+ 品质 
等 高 线 : ~ 口 消除 包 占 吕 
0 % 
图 层 控 空 投影 {U) 
设置 为 战 让 值 收入 为 点 议 值 


图 10-61 设置 各 选项 图 10-62 添加 投影 图 层 样 式 


企业 品牌 :掌握 品牌 展示 的 H5 页 面 设计 


企业 的 宣传 离 不 开 对 自身 品牌 的 宣传 ， 在 设计 企业 宣传 页 面 时 ， 要 制作 出 一 份 极 具 吸引 力 的 品牌 
展示 页 面 。 
本 实例 的 最 终 效 果 如 图 10-63 所 示 。 


图 10-63 ”实例 效果 
素材 文件 | 素材 \ 第 10 章 \ 彩 带 .psd、 飞 龙 标 志 .psd、 手 指 .psd、 相 机 .psd 
效果 文件 | 效果 \ 第 10 章 \ 掌 握 品 牌 展示 H5 页 面 设计 .psd、 掌 握 品 牌 展示 H5 页 面 设计 .jpg 
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10.3.1 设计 品牌 展示 色彩 搭配 效果 

大 多 数 的 品牌 展示 页 面 都 是 运用 厚重 的 色调 ， 看 上 去 缺少 一 些 趣味 和 新 鲜 感 ， 难 总 蝇 竺 
会 让 人 觉得 厌倦 ， 不 如 在 结合 自身 品牌 的 时 候 尝试 一 下 新 颖 又 百 搭 的 CP 色 一 一 红 出 中 aE 
蓝 。 下 面 详细 介绍 设计 品牌 展示 色彩 搭配 效果 的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 


© STEP 01 选择 “文件 ” |“ 新建” 命令 ， 弹 出 “新 建文 档 ” 对 话 框 ; 人 @@ 设 置 “名 称 ” 为 “掌握 品牌 展示 H5 
页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模 式 ” 为 
“RGB 颜色 ”、“ 背 景 内 容 ” 为 “和 白色”， 如 图 10-64 所 示 ; 人 @ 单 击 “ 创 建 ” 按 钮 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 选取 工具 箱 中 的 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 瓷 赣 色 ( RGB 参 数值 为 240、 
242、254 ) 、“ 描 边 ” 为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 和 矩形 图 形 ， 效 果 如 图 10-65$ 所 示 。 


(和 对 近 使 用 项 已 保存 照片 打印 图 称 和 括 图 


x 1 
让 我 们 开始 尝试 新 事物 吧 。 seam 5 页 面 设 计 迪 : 


从 您 自己 的 文档 设 吾 或 一 和 列 文档 预 设 开 始 以 快速 开始 工作 。 


图 10-64 设置 “新 建文 档 ” 对 话 框 
9 STEP 03 在 和 矩形 工具 属性 栏 中 设置 “填充 ”为 青 蓝 色 ( RGB 参 数值 为 50、138、209 ) 、“ 描 边 ” 为 


无 ， 在 图 像 编 辑 窗 口中 绘制 一 个 和 矩 形 ， 效 果 如 图 10-66 所 示 。 
9 STEP 04 在 和 矩形 工具 属性 栏 中 设置 “填充 ”为 鹿 蓝 色 ( RGB 参 数值 为 13、140、233 ) 、“ 描 边 ” 为 


无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 和 矩形， 效果 如 图 10-67 所 示 。 


绘制 


图 10-6$ 绘制 矩形 图 10-66 绘制 矩形 图 10-67 绘制 矩形 
9 STEP 05 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 深蓝 色 ( RGB 参 数值 为 3、71、 
146 ) 、“ 描 边 ” 为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 椭圆 ， 得 到 “椭圆 1” 图 层 ， 效 果 如 图 10-68 所 示 。 
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9 STEP 06 展开 “图 层 ” 面板 ， 选 择 “ 椭 圆 1” 图 层 ， 将 图 层 进 行 栅 格 化 处 理 。 选 择 工具 箱 中 的 矩形 选 
框 工具 ， 在 “椭圆 1” 图 层 上 方 绘制 一 个 矩形 选区 ， 用 键盘 左右 方向 键 适 当 调 整 选 区 位 置 ， 效 果 如 
图 10-69 所 示 。 

9 STEP 07 在 选择 的 “椭圆 1” 图 层 上 ， 按 Ctrl 十 Shift 十 J 组 合 键 ， 将 “椭圆 1” 图 层 所 在 选区 内 的 图 像 
截取 出 来 ， 人 图 层 ， 效 果 如 图 10-70 所 示 。 

在 Photoshop CC 2018 工 作 界 面 中 ， 如 果 要 使 用 绘图 工具 和 滤 镜 编辑 文字 图 、 


En 矢量 北 版 或 智能 对 象 等 包含 矢量 数据 的 图 层 ， 需 要 先 将 图 层 概 格 - 
化 ， 使 图 层 中 的 内 容 转换 为 概 格 图 像 ， 然 后 才能 够 进行 相应 的 操作 。 


图 10-68 ”绘制 椭圆 图 10-69 绘制 选区 图 10-70 截取 图 层 

9 STEP 08 按 住 Cctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “ 椭 圆 1” 图 层 的 缩 览 图 ， 使 

“椭圆 1” 图 层 载 入 选区 ; 选择 “编辑 ”|“ 填 充 ” 人 命令， 为 选区 填充 红色 
( RGB 参 数值 为 209、6、35 ) ， 并 删除 “椭圆 1” 图 层 ， 效 果 如 图 10-71 
所 示 。 

9 STEP 09 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ” 
为 “形状 ”、 “填充 ”为 暗 蓝 色 ( RGB 参 数值 为 26、115、197 ) 、“ 描 边 ” 
为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 如 图 10-72 所 示 的 形状 ， 得 到 “形状 1” 图 层 。 

9 STEP 10 展开 “图 层 ” 面 板 ， 选 择 “ 形 状 1” 图 层 ， 按 Ctrl 十 J 组 合 键 复制 图 
层 ， 得 到 “形状 1 找 贝 ”图 层 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “形状 
1 找 贝 ”图 层 的 缩 览 图 ， 使 “形状 1 拷贝 ”图 层 载 入 选区 ， 并 填充 为 深蓝 色 
( RGB 参数 值 为 3、 T1146 效果 如 图 10-73 所 示 。 图 10-71 填充 图 导 

ES 在 Photoshop ee 2018 工 作 界面 中 . 载 入 选区 是 指 在 已 经 保存 选区 之 后 ， 把 保存 : 

> 的 选区 再 次 调 出 来 。 而 按 住 Ctrl 键 单 击 图 层 缩 览 图 ， 是 自动 将 该 图 层 中 所 有 的 有 效 
”像素 全 部 选中 ， 而 且 ， 根 据 图 层 中 不 同 的 透明 度 与 深度 ， 选 区 的 选择 范围 也 不 相同 。 


ee ,图 层 ， 面板 中 ， 选择 “形状 1 拷贝 ”图 层 ， 选择 “编辑 ”|“ 变 换 ”| "水平 翻 转 " 命令 ， 
将 “形状 1 拷贝 ”图 层 进行 水 平 翻转 ， 用 移动 工具 将 图 像 移动 至 合适 的 位 置 ， 效 果 如 图 10-74 所 示 。 
9 STEP 12 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 


ee 
I 
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鹿 蓝 色 ( RGB 参数 值 为 1 3、140、233 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 如 图 10-75 所 示 的 
形状 ， 得 到 “形状 2” 图 层 。 


Ws 


图 10-72 ”绘制 形状 图 10-73 复制 填充 图 层 图 10-74 调整 图 像 
9 STEP 13 展开 “图 层 ” 面板 ， 选 择 “ 形 状 2” 图 层 ， 按 Ctrl 十 J 组 合 键 复制 图 层 ， 得 到 “形状 2 拷贝 
层 ; 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “ 形 状 2 拷贝 ”图 层 的 图 层 缩 览 图 ， 使 “形状 2 拷贝 ”图 层 
载 入 选区 ， 右 键 栅 格 化 图 层 ， 并 填充 为 深蓝 色 ( RGB 参 数值 为 3、71、146 ) ， 效 果 如 图 10-76 所 示 。 
9 STEP 14 在 “图 层 ” 面板 中 ， 选 择 “ 形 状 2 拷贝 ”图 层 ， 选 择 “ 编 辑 |“ 变 换 ”|“ 水 平 翻转 ”命令 ， 
将 “形状 2 找 贝 ”图 层 进行 水 平 翻转 ， 用 移动 工具 将 图 像 移动 至 合适 的 位 置 ， 效 果 如 图 10-77 所 示 。 


-ET ”在 Photoshop CC 2018 工 作 界面 中 ， 复 制图 层 有 3 种 方式 ; 第 一 种 是 使 用 快捷 键 : 
区 绰 点 ) col + 第 二 种 是 用 饼 标 右 刍 音 击 图 层 ， 在 弹出 的 快 生 表单 中 选择 “复制 轿 层 ” 命 
; 第 三 种 是 将 要 复制 的 图 层 拖 役 至 面板 下 方 的 “创建 新 图 层 ” 按 钮 上 晶 。 : 


旧时 四 


图 10-75 ”绘制 形状 图 10-76 填充 复制 图 像 图 10-77 ”调整 图 像 


10.3.2 妨 计 品牌 展示 主题 文子 效果 


品牌 展示 不 仅 要 在 色彩 搭配 上 做 到 有 吸引 力 ， 还 要 让 群众 能 一 眼 明 白 企 业 的 主 营 
业务 。 下 面 详 细 介绍 制作 品牌 展示 主题 文字 效果 的 方法 。 其 操作 步骤 如 下 。 


Photoshop 


HS 广告 设 计 
9 STEP 01 选取 工具 箱 中 的 和 矩形 工具 ， 在 属性 工具 栏 中 设置 “填充 ”为 无 、“ 描 边 ”为 白色 ( RGB 参数 
值 均 为 255 ) 、 “像素 ” 为 13， 在 图 像 编 辑 窗口 中 绘制 一 个 和 矩形， 得 到 “和 珑 形 4” 图 层 ， 适 当 调整 图 像 


大 小 及 位 置 ， 效 果 如 图 10-78 所 示 。 

9 STEP 02 展开 “图 层 ” 面 板 ， 选 择 “ 德 形 4” 图 层 ， 右 键 栅 格 化 图 层 ， 用 橡皮 探 工 具 探 掉 适 量 长 度 的 
边框 ， 效 果 如 图 10-79 所 示 。 

9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “ 彩 带 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
窗口 中 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 效 果 如 图 10-80 所 示 。 


图 10- 78 人 人 79 擦 除 短 形 边框 ~ 国 10-8 80 ”起 骂 图 像 


家 和 Ea et CC 2018 工 作 界面 中 ， 橡皮 擦 工具 可 以 将 图 像 区 域 擦 除 为 透明 或 攻 


© STEP 04 4 接 Cal 0 组 合 键 打开 ,相机 psd” ,素材 图 像 ， 用 移动 工具 将 素材 图 像 拖 昌 至 背景 图 像 编辑 
窗口 中 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 10-81 所 示 。 

9 STEP 05 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 合 令 ， 人 “字符 ”面板 中 ， 
加 设置 “字体 系列 ”为 “方正 大 黑 简体 ”、“ 字 体 大 小 ”为 31.22 点 、“ 行 中 ”为 “自动 ”、“ 设 置 
所 选 字 符 的 字 距 调整 ”为 400、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; @ 并 激活 仿 粗 体 图 标 , 如 图 
10-82 所 示 。 

9 STEP 06 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 10-83 所 示 。 

9 STEP 07 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”| 人 命令 ， 在 弹出 的 “字符 ”面板 中 ， 人 @ 设 
置 “字体 系列 ”为 “方正 大 黑 简 体 ”、“ 字 体 大 小 ”为 9 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 
字 距 调整 ”为 400、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ; 四 并 激活 仿 粗 体 图 标 ， 如 图 10-84 所 示 。 

9 STEP 08 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 10-85 所 示 。 


ee | ~ 0 
Ee 工具 、 直 排 文 字 工具 以 及 横 排 / 直 排 文 字 蒙 版 工具 ， 利 用 不 同 的 文字 工具 可 以 创建 
不 同 的 文字 效果 。 . 
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图 10-84 设置 各 选项 图 10-85 输入 文本 


10.3.3 ”设计 品牌 展示 企业 标志 效果 


在 企业 品牌 展示 中 ， 企 业 信 息 可 谓 是 重 中 之 重 ， 除 了 企业 名 称 外 ， 其 次 便 是 企业 
标志 。 下 面 详 细 介绍 制作 品牌 展示 企业 标志 效果 的 方法 。 其 操作 步骤 如 下 。 

e@e STEP 01 选取 工具 箱 中 的 椭圆 工具 ， 在 属性 工具 栏 中 设置 “填充 ”为 白色 ( RGB 参数 
均 为 255 ) 、“ 摘 边 ” 为 无 ， 在 图 像 编 辑 窗 口中 绘制 一 个 椭圆 ， 效 果 如 图 10-86 所 示 。 
e STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “飞龙 标志 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 到 篆 景 图 像 

编辑 窗口 中 ， 适 当 调 整 图 像 位 置 ， 得 到 “飞龙 标志 ”图 层 ， 效 果 如 图 10-87 所 示 。 

9 STEP 03 展开 “图 层 ” 面 板 ， 复 制 “ 飞 龙 标志 ”图 层 ， 得 到 “飞龙 标志 找 贝 ”图 层 ， 右 键 栅 格 化 图 
层 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “飞龙 标志 拷贝 ”图 层 缩 览 图 ， 将 “飞龙 标志 拷贝 ”图 层 载 
入 选区 ， 填 充 为 白色 ( RGB 参 数值 均 为 255 ) ， 用 移动 工具 将 图 像 移动 到 适当 的 位 置 ， 然 后 按 Ctrl 十 T 
组 合 键 ， 适 当 调 整 图 像 位 置 及 大 小 ， 效 果 如 图 10-88 所 示 。 

9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 手 指 .psd” 素 材 图 像 ， 用 移动 工具 并 选择 “编辑 ”|“ 自 由 变换 ” 命 


令 ， 适当 调整 图 像 位 置 及 大 小 ， 效 果 如 图 10-89 所 示 。 


Photoshop 
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图 10-86 绘制 椭圆 图 10-87 拖 旨 图 像 图 10-88 调整 复制 图 像 


9 STEP 05 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ，@ 设 
置 “字体 系列 ”为 “楷体 ”、“ 字 体 大 小 ”为 8 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字 符 的 字 距 调 
整 ” 为 0、 “颜色 ”为 白色 ( RGB 参 数值 均 为 255 ) ; 四 并 激活 仿 粗 体 图 标 ， 如 图 10-90 所 示 。 

eSTEP 06 输 入 文本 并 调整 至 合适 的 位 置 ， 效 果 如 图 10-91 所 示 。 至 此 ， 完 成 品牌 展示 的 H5 页 面 
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图 10-89 调整 图 像 图 10-90 设置 各 选项 图 10-91 输入 文本 


节目 活动 是 当今 社会 不 可 或 缺 的 一 个 重要 组 成 部 分 ， 已 经 从 原来 的 传统 
节日 活动 演变 开 来 ， 形 成 了 一 些 特定 的 主题 活动 ， 在 固定 或 不 国定 的 日 期 内 
举办 各 种 营销 活动 。 本 章 主 要 介绍 常见 节日 活动 HS 广告 设计 的 方法 。 


购物 活动 : 掌握 年 中 大 促 的 H5 页 面 设计 
电 商 活动 : 掌握 双 十 二 促销 的 H5 页 面 设计 
七 夕 活动 : 掌握 情 人 节 的 HS 页 面 设计 
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[有 同 帅 购物 活动 : 掌握 年 中 大 促 的 H5 页 面 设计 


年 中 大 促 是 各 商业 性 企业 在 上 半年 过 完 举 办 的 一 种 促销 活动 ， 价 格 及 优惠 力度 十 分 诱 人 ， 给 消费 
者 打造 购物 盛宴 。 
本 实例 的 最 终 效果 如 图 11-1 所 示 。 
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图 11-1 实例 效果 


素材 文件 | 素材 \ 第 11 章 \ 舞 台 .psd 


11.1.1 ”设计 年 中 大 促 渐变 至 景 效 果 


促销 活动 就 是 为 消费 者 打造 购物 盛宴 ， 所 以 渐变 背景 的 设计 ， 能 够 很 好 地 泻 染 营 昌 笠 

销 活动 的 气氛 ， 营 造 消费 购物 的 激情 。 下 面 详细 介绍 设计 年 中 大 促 渐 变 背 景 效果 的 方 eine: 

法 。 其 操作 步骤 如 下 。 扫 码 看 视频 

9 STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “掌握 年 中 大 促 
H5 页 面 设 计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模 
式 ” 为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 11-2 所 示 ; 人 @ 单 击 “ 创 建 ” 按 钮 ， 新 建 一 个 空 
白 图 像 。 

9 STEP 02 展开 “图 层 ” 面 板 ， 新 建 “ 图 层 1” 图 层 ， 选 取 工 具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 
器 ”对 话 框 ，@ 在 渐变 条 上 设置 淡 紫 色 到 深 紫色 的 渐变 ( RGB 参 数值 分 别 为 189、73、208; 34、4、 
128 ) ; 四 并 单 击 “ 新 建 ” 按 钮 ， 新 建 渐 变 预 设 ， 如 图 11-3 所 示 。 

e@e STEP 03 选中 “图 层 1” 图 层 ， 在 渐变 工具 属性 栏 中 的 “渐变 ”选项 区 中 ， 选 择 新 建 的 淡 紫 色 到 深 紫 
色 的 渐变 色 ， 设 置 “ 径 向 渐变 ”， 在 图 像 编 辑 窗口 中 ， 从 图 像 最 下 方正 中 心 往 图 像 中 心 点 垂直 拖 电 填 
充 径 癌 渐 变 ， 效 果 如 图 11-4 所 示 。 
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图 11-3 新建 渐 变 预 设 图 11-4 填充 径 向 渐变 


11.1.2 ”设计 年 中 大 促 压 部 角 饰 效果 


年 中 大 促 页 面 的 设计 可 以 采用 舞台 灯光 的 装饰 效果 ， 为 购物 盛宴 打造 一 种 华丽 的 “fa 纪 国 遇 
色彩 。 下 面 详细 介绍 设计 年 中 大 促 底部 装饰 效果 的 方法 。 其 操作 步骤 如 下 。 由 
© STEP 01 ee 打开 “和 舞 合 .psd” 素 材 图 像 ， 展开 “图 层 ” 面 板 中 的 “ 底 ” 扫 码 看 视频 


盘 ” 图 层 组 ， 如 图 11-5 所 示 。 

© STEP 02 人 用 鼠标 左 键 选 中 “底盘 ”图 层 组 中 的 “图 层 191” “图 层 171” “图 层 
192” “图 层 161 ( 合并 ) ”， 用 移动 工具 拖 蝶 到 图 像 编 辑 窗 口中 ， 效 果 如 图 11-6 所 示 。 

9 STEP 03 按 Ctrl 十 O 组 合 键 ， 将 拖 蝶 的 图 像 所 对 应 的 图 层 进行 编组 ， 并 命名 为 “舞台 ”图 层 组 ， 如 


图 11-7 所 示 。 
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e。 图 as， 
e | | 前 


9 D8 日 从 9 所 口 8 白 昌 全 
图 11-5 展开 图 层 图 11-6 ” 拖 提 图 像 图 11-7 图 层 编组 

9 STEP 04 选中 “舞台 ”图 层 组 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 
图 11-8 所 示 。 

9 STEP 05 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形 ， 得 到 “ 甜 形 1 
层 ， 效 果 如 图 11-9 所 示 。 

9 STEP 06 在 “图 层 ” 面 板 中 ， 用 鼠标 右键 单 击 “ 甜 形 1” 图 层 ， 在 弹出 的 快捷 菜单 中 选择 “转换 为 智 
能 对 象 ” 命令， 将 图 层 转换 为 智能 对 象 ， 如 图 11-10 所 示 。 


sae [一 
~ 不 媳 明 这 :100% 
隧 珊 形 本 属性 出 村 加 顺 友 ; 100% 
I 
无 类 色 dae 17 
调整 es | me: 
ae 
Be PES : 
页 暴 外 
ea 
基于 3D 栓 开 DD 
图 11-8 调整 图 像 图 11-9 绘制 和 矩形 图 11-10 图 层 转换 


9 STEP 07 选中 “ 甜 形 1” 图 层 ， 选 择 “ 滤 镜 ”|“ 模 糊 ”|“ 径 向 模糊 ”命令 ， 在 弹出 的 “ 径 向 模糊 ”对 
话 框 中 ， 设 置 “数量 ”为 100、“ 模 糊 方法 ”为 “缩放 ”、 “品质 ”为 “好 ”， 如 图 11-11 所 示 。 

9 STEP 08 单 击 “ 和 确定” 按钮， 为 图 层 添 加 径 向 模糊 ， 效 果 如 图 11-12 所 示 。 

9 STEP 09 在 “图 层 ” 面 板 中 ,设置 “矩形 1 ”图 层 的 “不 透明 度 ” 为 20%， 效 果 如 图 11-13 所 示 。 
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图 11-11 设置 径 向 模糊 图 11-12 添加 图 层 滤 镜 。 图 11-13 ”设置 图 层 的 不 透明 度 


11.1.3 ”设计 年 中 大 促 标志 文子 效果 


设计 年 中 大 促 的 活动 页 面 时 ， 要 将 标志 、 举 办 方 、 时 间 以 及 地 点 等 信息 突出 显 
示 ， 让 消费 者 直观 地 了 解 到 促销 活动 的 详细 信息 。 下 面 介绍 制作 年 中 大 促 标 志文 字 效 ” 国 由 
果 的 方法 。 其 操作 步 又 如 下 。 扫 码 看 视 频 
9 STEP 01 选取 工具 箱 中 的 多 边 形 工 具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 - 
为 无 、“ 描 边 ” 为 粉色 ( RGB 参数 值 分 别 为 229、0、126 ) 、“ 像 素 ” 为 30、“ 边 ”为 3， 在 图 像 编 辑 
窗口 中 绘制 一 个 多 边 形 ， 得 到 “多 边 形 1” 图 层 ， 如 图 11-14 所 示 。 
9 STEP 02 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适当 调 整 图 像 的 形状 、 大 小 及 位 置 ， 效 果 如 图 11-15 所 示 。 


图 11-14 绘制 多 边 形 图 11-15 调整 图 像 
9 STEP 03 展开 “图 层 ” 面 板 ， 双 击 “ 多 边 形 1” 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ，@ 选 中 “ 描 边 ” 复 
选 框 ; 全 设置 “大 小 ”为 9 像素 、“ 位 置 ” 为 “外 部 ”、“ 混 合 模 式 ” 为 “正常 ”、““ 不 透明 度 ” 为 


加 
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100%6、 “填充 类 型 ”为 “颜色 ”、“ 颜 色 ” 为 深 紫 色 ( RGB 参 数值 分 别 为 34、4、128 ) ， 如 图 11-16 
所 示 。 
eSTEP 04 单 击 “确定 ”按钮 ， 为 图 层 添加 描 边 ， 效 果 如 图 11-17 所 示 。 


( 确定 河 


取消 
新 娃 桂 式 (W),,。 ) 
预 此 ({V) 


图 11-16 设置 图 层 样 式 图 11-17 添加 描 边 
9 STEP 05 在 “图 层 ”面板 中 ， 右 键 单 击 “ 多 边 形 ” 图 层 ， 将 其 栅 格 化 处 理 ; 选取 工具 箱 中 的 橡皮 控 工 
具 ， 在 图 像 编 辑 窗口 中 ， 适 当 控 除 “ 多 边 形 1” 图 层 所 对 应 图 像 的 三 个 边缘 线段 的 一 部 分 ， 效 果 如 
图 11-18 所 示 。 
9 STEP 06 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ” |“ 字符 ”命令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “ 字 体系 列 ” 为 “方正 综艺 简体 ”、 “字体 大 小 ”为 49.23 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字 
符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 235 ) ， 如 图 11-19 所 示 。 


9 STEP 07 输入 相应 文本 并 调整 文字 至 合适 的 位 置 ， 效 果 如 图 11-20 所 示 。 


x 
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图 11-18 擦 除 图 像 图 11-19 设置 字符 各 选项 图 11-20 输入 文本 


ER ”在 Photoshop CC 2018 的 工作 界面 中 ， 用 橡皮 擦 工具 [ 久 ] 可 以 擦 除 图 像 。 如 果 处 
z 专家 指点 ) 如 轴 是“ 痢 景 ”图 司 或 镇 定 了 适 明 区 域 的 图 层 ， 洲 扩 区 域 会 显示 为 此 景色 ， 处 理 其 
他 图 层 时 ，， 可 以 控 除 涂抹 区 域 的 像素 。 


9 STEP 08 在 “字符 ”面板 中 ， 设 置 “字体 系列 " 有 “方正 相 宁 简体 ”、 一 字体 大 小 ” 为 54 点 、 和 
距 ” 为“ 自动” 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 黄色 ( RGB 参数 值 分 别 为 240、 
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255、5 ) ， 如 图 11-21 所 示 。 

9 STEP 09 输入 相应 文本 并 调整 文字 至 合适 的 位 置 ， 效 果 如 图 11-22 所 示 。 

9 STEP 10 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 粗 宋 简体 ”、“ 字 体 大 小 ”为 24 点 、“ 行 
距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 130、“ 颜 色 ” 为 粉色 ( RGB 参数 值 分 别 为 229、 
0、126 ) ， 如 图 11-23 所 示 。 


x ~ 
字符 。 店 落 三 字符 | 段落 元 
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图 11-21 设置 字符 各 选项 图 11-22 输入 文本 图 11-23 设置 字符 各 选项 


9 STEP 11 输入 相应 文本 并 调整 文字 至 合适 的 位 置 ， 效 果 如 图 11-24 所 示 。 

9 STEP 12 展开 “图 层 ” 面板 ， 双 击 “ 要 疯狂 就 彻底 ”文字 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ，@ 选 中 
“ 描 边 ” 复 选 框 ，@ 设 置 “ 大 小 ”为 9 像素 、“ 位 置 ” 为 “外 部 ”、“ 混 合 模式 ”为 “正常 ”、“ 不 
透明 度 ” 为 100%、“ 填 充 类 型 ”为 “颜色 ”、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 11-25 
所 示 。 


新 建 样式 {W)-… 
家 览 (V) 


图 11-24 输入 文本 图 11-25 ”设置 图 层 样式 
9 STEP 13 单 击 “确定 ”按钮 为 图 层 添 加 描 边 ， 效 果 如 图 11-26 所 示 。 
e@eSTEP 14 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 14 点 、“ 行 距 ” 为 18 点 、“ 设 置 所 选 字符 的 字 距 调整 ” 
为 0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 并 设置 左 对 齐 文 本 ， 如 图 11-27 所 示 。 
9 STEP 15 输入 相应 文本 ， 并 调整 文字 至 合适 的 位 置 ， 效 果 如 图 11-28 所 示 。 
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图 11-26 添加 描 边 图 11-27 设置 字符 选项 图 11-28 输入 文本 
9 STEP 16 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ” 为 14 点 、“ 行 距 ” 为 18 
196、255 ) ， 并 设置 


点 、“ 设 置 所 选 字符 的 字 距 调整 为 0、“ 颜 色 ” 为 蓝 色 ( RGB 参数 值 分 别 为 3、 


AAAN AN 


居中 对 齐 文 本 ， 如 图 11-29 所 示 。 
9 STEP 17 输入 相应 文本 ， 并 调整 文字 至 合适 的 位 置 ， 效 果 如 图 11-30 所 示 。 

9 STEP 18 选取 工具 箱 中 的 移动 工具 ， 展 开 “ 图 层 ” 面 板 ， 按 住 Shift 键 的 同时 ， 用 鼠标 左 键 选中 “ 活 
“6 月 18 日 当天 西岸 .国定 ”两 个 文字 图 层 ， 在 移动 工具 属性 栏 中 单 击 “ 垂 直 居 中 对 
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图 11-29 设置 字符 选项 


图 11-30 ”输入 文本 图 11-31 对 齐 图 层 


9 STEP 19 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编 辑 器 ”对 话 框 ，@ 在 渐变 条 上 设置 青色 到 淡 青色 的 


渐变 ( RGB 参 数值 分 别 为 $5、235、205; 206、255、253 ) ;四 单 击 “新 建 ” 按 钮 ， 新 建 渐变 预 设 ， 如 


图 11-32 所 示 。 
9 STEP 20 选取 工具 箱 中 的 自 定义 形状 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
“形状 ” 


充 为 “渐变 ” ( 在 “渐变 ”选项 中 选择 新 建 的 青色 到 淡 青 色 的 渐变 色 ) 、“ 描 边 ” 为 无 、 
为 模糊 态 和 在 图 像 顺 玉 窗 口中 绘制 一个 训 图 11-33 所 示 内 形状 。 

Rh a CC 2018 工 作 界 面 中 ， 使 用 自 定形 状 工具 [就 可 以 通过 设置 不 同 的 形 
| em 人 会 侧 形 状 路 径 或 图 形 ， 自 定 形状 失色 疾 中 有 大 量 的 特殊 形状 可 供 选择 。 | 
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图 11-32 新建 渐变 预 设 图 11-33 绘制 自 定 义 形 状 
9 STEP 21 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 设置 
“字体 系列 ”为 “方正 粗 宋 简体 ”、“ 字 体 大 小 ”为 8 点 、“ 行 距 ” 为 “自动 “设置 所 选 字符 的 


字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 235 ) ， 如 图 11-34 所 示 。 
e STEP 22 输入 相应 文本 ， 并 调整 至 适当 的 位 置 ， 效 果 如 图 11-35 所 示 。 
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图 11-34 设置 字符 选项 图 11-35 输入 文本 
9 STEP 23 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 宋 简体 ”、“ 字 体 大 小 ”为 6 点 、“ 行 距 ” 
为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 11-36 
所 示 。 


9 STEP 24 输入 相应 文本 ， 并 调整 至 适当 的 位 置 ， 效 果 如 图 11-37 所 示 。 

9 STEP 25 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
无 、“ 摘 边 ” 为 白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 宽度 ”为 6 像素 ， 在 图 像 编 辑 窗口 中 绘制 一 个 形 
状 ， 并 适当 调整 形状 位 置 ， 效 果 如 图 11-38 所 示 。 

9 STEP 26 选取 工具 箱 中 的 自 定义 形状 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
充 ” 为 “渐变 ” ( 在 “渐变 ”选项 中 选择 “色谱 ”渐变 色 ) 、“ 渐 变样 式 ” 为“ 线性”、“ 旋 转 渐 
变 ” 为 -27、“ 描 边 ” 为 无 、“ 形 状 ” 为 “百合 形状 ”， 在 图 像 编 辑 窗口 中 绘制 一 个 如 图 11-39 所 示 的 


形状 。 
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图 11-36 设置 字符 选项 图 11-37 输入 文本 


路 国定 集团 绘制 路 国定 傈 团 


图 11-38 绘制 形状 图 11-39 ”绘制 形状 
9 STEP 27 选取 工具 箱 中 的 直 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 设置 
“字体 系列 ”为 “方正 粗 宋 简体 ”、“ 字 体 大 小 ”为 6 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 
字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 11-40 所 示 。 
9 STEP 28 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 11-41 所 示 。 
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图 11-40 设置 字符 选项 图 11-41 输入 文本 
9 STEP 29 选取 工具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ” 为“ 形状”、 “填充 ”为 
无 、“ 描 边 ” 为 白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 宽度 ”为 3 像素 ， 在 图 像 编辑 窗口 中 绘制 一 个 形 
状 ， 并 适当 调整 形状 位 置 ， 效 果 如 图 11-42 所 示 。 
e STEP 30 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 宋 简 体 ”、 
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“字体 大 小 ”为 7 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 
( RGB 参 数值 均 为 255 ) ， 如 图 11-43 所 示 。 
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图 11-43 ”设置 字符 选项 

9 STEP 31 输入 相应 文本 ， 并 调整 文字 至 合适 的 位 置 ， 效 果 如 图 11-44 所 示 。 

9 STEP 32 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 粗 宋 简体 ”、“ 字 体 大 小 ”为 4 点 、“ 行 
距 ” 为 “自动 ” 、“ 设 置 所 选 字符 的 字 距 调整 ”为 0(、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 
图 11-45 所 示 。 


9 STEP 33 输入 相应 文本 ， 并 调整 文字 至 合适 的 位 置 ， 效 果 如 图 11-46 所 示 。 至 此 ， 完 成 年 中 大 促 H5 页 
面 设计 。 


图 11-42 ”绘制 形状 
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图 11-44 输入 文本 图 11-45 设置 字符 选项 图 11-46 输入 文本 


电 商 活动 : 掌握 双 十 二 促销 的 H5 页 面 设计 


双 十 二 促销 活动 最 早 来 源 于 阿里 巴巴 在 电 商 造 节 中 的 首 秀 ， 但 逐渐 被 市 场 演化 成 一 年 一 次 的 商品 
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本 实例 的 最 终 效果 如 图 11-47 所 示 。 


素材 \ 第 11 章 \ 海 浪 纹 理 .jpg、 海 鲜 堆 .psd、 火 龙 果 .psd、 绿 叶 1.psd、 绿 叶 2.psd、 绿 叶 3.psd、 水 
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11.2.1 设计 双 十 二 促销 纹理 绿叶 效果 


这 次 设计 双 十 二 促销 活动 的 主题 是 “ 鲜 生 ” 一 一 新 鲜 海鲜 、 生 果 ， 所 以 在 设计 制 记名 
作 背 景 时 ， 采 用 偏 暖 色调 ， 可 以 与 主题 更 加 呼应 。 下 面 详细 介绍 设计 双 十 二 促销 纹理 绿 区 二 人 
叶 效果 的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 
eSTEP 01 选择 “文件 ”| “新建” 命令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ”为 “掌握 双 十 二 促 
销 H5 页 面 设计 ”、“ 宽 度 ”为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ”为 300 像 素 /英寸 、“ 颜 色 
模式 ”为 “RGB 颜 色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 11-48 所 示 ; @ 单 击 “ 创 建 ”按钮 ， 新 建 一 个 
空白 图 像 。 
e STEP 02 按 Ctrl 十 0 组 合 键 ， 打 开 “ 海 浪 纹 理 jpg” 素 材 图 像 ， 解 锁 图 层 ， 用 移动 工具 将 图 像 拖 昂 至 图 
像 编辑 窗口 中 的 合适 位 置 ， 并 命名 为 “海浪 纹理 背景 ”， 效 果 如 图 11-49 所 示 。 
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图 11-48 设置 各 选项 图 11-49 拖 旨 图 像 
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9 STEP 03 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 人 位置， 效果 如 图 11-$0 所 示 。 

9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 绿 叶 1.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 抱 蝶 至 图 像 编辑 窗 口中 
的 合适 位 置 ， 并 将 图 层 命名 为 “绿叶 1”， 效 果 如 图 11-51 所 示 。 

e STEP 05 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 11-52 所 示 。 
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图 11-50 调整 图 像 图 11-51 拖 提 图 像 图 11-52 ”调整 图 像 


e@ STEP 06 按 Ctrl 十 O 组 合 键 ， 打 开 “ 绿 时 2.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编 辑 窗口 中 
的 合适 位 置 ， 并 将 图 层 命 名 为 “绿叶 2”， 效 果 如 图 11-53 所 示 。 

9 STEP 07 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 人 位置， 效果 如 图 11-$4 所 示 。 

9 STEP 08 按 Ctrl 十 O 组 合 键 ， 打 开 “ 绿 时 3.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 抱 中 至 图 像 编 辑 窗口 中 
的 合适 位 置 ， 并 将 图 层 命名 为 “绿叶 3”， 效 果 如 图 11-55 所 示 。 
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图 11-53 ” 拖 提 图 像 图 11-54 调整 图 像 图 11-55 拖 提 图 像 
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11.2.2 ”设计 双 十 二 促销 文字 边框 效果 


在 设计 双 十 二 促销 页 面 时 ， 为 文字 适当 加 上 边框 ， 可 以 更 好 地 突出 文字 主题 。 下 
面 详 细 介绍 设计 双 十 二 促销 文字 边框 效果 的 方法 。 其 操作 步骤 如 下 。 回避 de 
e STEP 01 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 扫 码 看 视频 
“字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 Stencil|、“ 字 体 大 小 ”为 “64.99 点 ”、“ 行 距 ” 为 “自动 ”、 
“设置 所 选 字符 的 字 距 调整 为 0、“ 颜 色 ” 为 深 绿色 ( RGB 参 数值 分 别 为 57、109、26 ) ， 如 图 11-56 
所 示 。 
9 STEP 02 输入 相对 应 的 文本 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 对 文本 变形 ， 并 调整 至 合适 的 位 置 ， 
效果 如 图 11-57 所 示 。 
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图 11-56 设置 字符 选项 图 11-57 输入 文本 
9 STEP 03 展开 “图 层 ” 面板， 双击 “12 12” 文 字 图 层 空白 处 ， 弹 出 “图 层 样式 ”对 话 框 ，@ 选 中 “ 描 
边 ” 复 选 框 ; 全 设置 “大 小 ”为 9 像素 、“ 位 置 ” 为 “外 部 ”、“ 混 合 模 式 ” 为 “正常 ”、“ 不 透明 
度 ” 为 100%、 “填充 类 型 ”为 “颜色 ”、 “颜色 ”为 白色 ( RGB 参数 值 均 为 235 ) ， 如 图 11-58 所 示 。 
© STEP 04 单 击 “确定 ”按钮 ， 为 图 层 添 加 描 边 ， 效 果 如 图 11-59 所 示 。 
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图 11-58 设置 图 层 样式 图 11-59 ”添加 描 边 
9 STEP 05 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 “24 点 ”、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 
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的 字 距 调整 ”为 0 “颜色 ”为 深 绿色 ( RGB 参 数值 分 别 为 57、109、26 ) ， 如 图 11-60 所 示 。 

9 STEP 06 输入 相应 文本 ， 并 适当 调整 文字 至 合适 的 位 置 ， 效 果 如 图 11-61 所 示 。 

9 STEP 07 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “方正 粗 宋 简体 ”、 “字体 大 小 ”为 “30 点 ”、 
“行距 ”为 “自动 ” 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 人 参数 值 均 为 255 ) ， 
如 图 11-62 所 示 。 
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图 11-60 设置 字符 选项 图 11-61 输入 文本 图 11-62 设置 字符 选项 


9 STEP 08 输入 相应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 11-63 所 示 。 

9 STEP 09 展开 “图 层 ” 面 板 ， 选 中 “ 鲜 生 ” 文 字 图 层 ，@ 单 击 面板 下 方 的 “创建 新 图 层 ” 按 钮 ， 在 图 
层 上 方 新 建 一 个 图 层 ， 人 并 命名 为 “和 矩形 1”， 如 图 11-64 所 示 。 

9 STEP 10 在 “和 矩形 1” 图 层 上 ， 选 取 工 具 箱 中 的 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 
“形状 ”、“ 填 充 ” 为 深 绿色 ( RGB 参数 值 分 别 为 97、109、26 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 


中 绘制 一 个 窍 形 ， 效 果 如 图 11-65 所 示 。 
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图 11-63 ”输入 文本 图 11-64 ”新建 图 层 图 11-65 ”绘制 矩形 
9 STEP 11 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 11-66 所 示 。 
9 STEP 12 展开 “图 层 ” 面 板 ， 选 中 “绿叶 2” 图 层 ， 息 单 击 面板 下 方 的 “创建 新 图 层 ” 按 钮 ， 在 图 层 
上 方 新 建 一 个 图 层 ，@ 并 命名 为 “和 矩形 2”， 如 图 11-67 所 示 。 
9 STEP 13 在 “和 矩形 2” 图 层 上 ， 选 取 工 具 箱 中 的 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 
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“形状 ”、 “填充 ”为 无 、“ 描 边 ” 为 深 绿 色 ( RGB 参 数值 分 别 为 57、109、26 ) 、“ 描 边 宽度 ”为 
10 像 素 ， 在 图 像 编辑 窗口 中 绘制 一 个 和 矩形， 效果 如 图 11-68 所 示 。 
eSTEP 14 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 11-69 所 示 。 
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图 11-66 ”调整 图 像 图 11-67 新 建 图 层 图 11-68 绘制 矩形 图 11-69 调整 图 像 

e@eSTEP 15 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “隶书 ”、“ 字 体 大 小 ”为 “24 点 ”、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 
距 调整 ”为 0(、“ 颜 色 ” 为 深 绿 色 ( RGB 参数 值 分 别 为 37、109、26 ) ， 如 图 11-70 所 示 。 

9 STEP 16 输入 相对 应 文本 ， 并 调整 至 合适 的 位 置 ， 效 果 如 图 11-71 所 示 。 

9 STEP 17 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
深 绿色 ( RGB 参数 值 分 别 为 37、109、26 ) 、“ 描 边 ” 为 无 、“ 粗 细 ” 为 5 像素 ， 在 图 像 编 辑 窗口 中 绘 
制 一 条 直线 ， 效 果 如 图 11-72 所 示 。 


11.2.3 ”设计 双 十 二 促销 产品 布局 效果 


商品 促销 界面 的 设计 ， 要 注重 产品 的 布局 。 下 面 详细 介绍 设计 双 十 二 促销 产品 布 
局 效果 的 方法 。 其 操作 步骤 如 下 。 
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9 STEP 01 按 Ctrl 十 O 组 合 键 ， 打开“ 火龙 果 .psd” 素 材 图 像 ， 用 移动 工具 拖 蝶 图 像 至 图 像 编辑 窗口 中 合 
适 的 位 置 ， 并 将 图 层 命名 为 “火龙 果 ”， 效 果 如 图 11-73 所 示 。 

9 STEP 02 按 Ctrl 十 O 组 合 键 ， 打开“ 西瓜 .psd” 素 材 图 像 ， 用 移动 工具 拖 蝶 图 像 至 图 像 编 辑 窗口 中 合适 
的 位 置 ， 并 将 图 层 命 名 为 “西瓜 ”， 效 果 如 图 11-74 所 示 。 
STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “ 海 鲜 堆 .psd” 素 材 图 像 ， 用 移动 工具 拖 忠 图 像 至 图 像 编辑 窗 口中 合 
适 的 位 置 ， 并 将 图 层 命名 为 “海鲜 堆 ” ， 效 果 如 图 11-75 所 示 。 


图 11-73 ” 拖 旨 图像 图 11-74 拖 提 图 像 图 11-75 拖 提 图 像 

9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 鱼 虾 .psd” 素 材 图 像 ， 用 移动 工具 拖 电 图 像 至 图 像 编 辑 窗 口中 合适 
的 位 置 ， 并 将 图 层 命 名 为 “ 鱼 虾 堆 ”， 效 果 如 图 11-76 所 示 。 

9 STEP 05 按 Ctrl 十 O 组 合 键 ， 打 开 “ 水 果 堆 .psd” 素 材 图 像 ， 用 移动 工具 拖 蝶 图 像 至 图 像 编 辑 窗口 中 合 
适 的 位 置 ， 并 将 图 层 命名 为 “水 果 堆 ”， 效 果 如 图 11-77 所 示 。 

9 STEP 06 展开 “图 层 ” 面 板 ， 按 住 Shift 键 的 同时 ， 用 鼠标 左 键 选取 “火龙 果 ” “西瓜 ”“ 海 鲜 
堆 ”“ 鱼 虾 堆 ”“ 水 果 堆 ”5 个 图 层 ， 按 Ctrl 十 G 组 合 键 ， 将 图 层 编 组 ， 得 到 “组 1” 图 层 组 ， 如 
图 11-78 所 示 。 
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图 11-76 拖 旨 图 像 图 11-77 拖 如 图像 图 11-78 图 层 编组 
9 STEP 07 双击 “组 1” 图 层 组 空白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ，@ 选 中 “投影 ” 复 选 框 ， 
四 设置 “混合 模式 ”为 “正片 到底 ”、“ 阴 影 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) 、“ 不 透明 度 ” 为 


op 友 回 避 自 司 舍 
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51%、“ 和 角度 ”为 156 度 、“ 距 离 ” 为 4 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 0 像素 ， 如 图 11-79 所 示 。 
e STEP 08 单 击 “确定 ”按钮 ， 为 图 层 添加 投影 ， 效 果 如 图 11-80 所 示 。 至 此 ， 完 成 双 十 二 促销 H5 页 面 


设计 。 
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图 11-79 设置 图 层 样式 图 11-80 添加 投影 


用 ] 七 夕 活动 : 掌握 情人 节 的 H5 页 面 设计 


七 夕 始 于 中 国 汉 代 ， 起 源 于 对 自然 的 崇拜 及 妇女 穿 针 乞 巧 ， 但 后 来 逐渐 被 牛郎织女 的 传说 演变 为 
象征 爱情 的 情人 节 。 
本 实例 的 最 终 效果 如 图 11-81 所 示 。 


图 11-81 实例 效果 


素材 文件 | 素材 \ 第 11 章 \ 星 空 背景 jpg、 爱 心 1psd、 爱 心 2.psd、 情 侣 1.psd、 情 侣 2.psd 


效果 文件 | 效果 \ 第 11 章 \ 掌 握 情 人 节 H5 页 面 设计 .psd、 掌 握 情 人 节 HH5 页 面 设计 .jpg 


第 11 章 “日 活动 : 电 丙 购物 的 HS 广告 设计 


11.3.1 设计 情人 地 痕 漫 星 空 痛 景 


衣 人 节 活 动 的 消费 群体 大 都 是 女性 ， 而 女性 的 潜意识 里 都 对 爱情 充满 美好 同 往 ， 

项 豆 浪漫 的 爱 悄 ， 所 以 在 设计 情人 市 活动 页 面 痛 景 时 ， 需 要 将 浪漫 美好 的 元 素 融 入 育 ” 同时 eH 
景 中 。 下 面 详细 介绍 设计 情人 节 浪 漫 星 空 背 景 效果 的 方法 。 其 操作 步骤 如 下 。 提 码 乔 视 频 
9 STEP 01 选择 “文件 |“ 新 建 ” 命令， 弹出 “新 建文 档 ” 对 语 框 ， 合 设置 “名 称 ” 为 “掌握 情人 节 活 
动 H5 页 面 设 计 ”、 “宽度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 / 基 寸 、“ 颜 色 
模式 ”为 “RGB 颜色 ”、“ 表 景 内 容 。 为 “和 白色 ”， 如 图 11-82 所 示 ; 仿 单 击 “ 创 建 ” 按钮， 新 建 一 个 


空白 图 像 。 
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图 11-82 ”设置 各 选项 
e STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “ 星 空 背 景 .jpg” 素 材 图 像 ， 在 “图 层 ” 面 板 中 ， 单 击 “ 
右 侧 “指示 图 层 部 分 锁定 ”按钮 ， 解 锁 图 层 ， 如 图 11-83 所 示 。 
e STEP 03 用 移动 工具 拖 蝶 解锁 后 的 “图 层 0” 图 层 所 对 应 的 图 像 至 图 像 编 辑 窗口 中 ， 将 图 层 命 名 为 
“星空 背景 ”， 效 果 如 图 11-84 所 示 。 
9 STEP 04 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 效 果 如 图 11-85 所 示 。 
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图 11-83 ”解锁 图 层 图 11-84 拖 旭 图 像 


图 11-85 调整 图 像 
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9 STEP 05 选择 “图 像 ”|“ 调 整 ”|“ 曲 线 ” 命 令 ， 弹 出 “曲线 ”对 话 框 ， 在 曲线 上 单 击 女 标 左 键 新 建 
一 个 控制 点 ， 在 下 方 设置 “输入 ”为 211、“ 输 出 ”为 173， 如 图 11-86 所 示 。 
e STEP 06 单 击 “确定 ”按钮 为 图 层 添 加 曲线 ， 效 果 如 图 11-87 所 示 。 
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图 11-86 设置 曲线 图 11-87 添加 曲线 


11.3.2 ” 访 计 情人 史 尖 要 文 子 投 香 效 果 


在 情人 节 活 动 页 面 的 文字 设计 中 ， 添 加 渐变 效果 是 为 了 与 设计 的 渐变 星空 背景 更 加 
融合 ， 而 按钮 是 HS 页面 不 可 或 缺 的 一 个 交互 设计 。 下 面 详 细 介绍 设计 情人 节 渐 变 文字 按 
钮 效果 的 方法 。 其 操作 步骤 如 下 。 

e STEP 01 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ” 
为 白色 ( RGB 参 数值 均 为 255 ) ，“ 搞 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 用 鼠标 左 键 双 击 ， 弹 出 “创建 矩 
形 ” 对 话 框 ， 设 置 “宽度 ”为 935 像 素 、“ 高 度 ” 为 946 像 素 ， 然 后 单 击 “确定 ”按钮 ， 确 认 绘 制 矩 
形 ， 得 到 “和 矩 形 1” 图 层 ， 效 果 如 图 11-88 所 示 。 

9 STEP 02 展开 “图 层 ” 面 板 ， 将 “和 矩形 1” 图 层 的 “不 透明 度 ” 设 置 为 33%， 效 果 如 图 11-89 所 示 。 

9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打开 “爱心 1” 素 材 图 像 ， 用 移动 工具 拖 忠 图 像 至 图 像 编辑 窗 口中 ， 并 将 
图 层 命名 为 “爱心 1”， 效 果 如 图 11-90 所 示 。 


调整 


图 11-88 绘制 矩形 图 11-89 调整 不 透明 度 图 11-90 拖 提 图 像 
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9 STEP 04 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 效 果 如 图 11-91 所 示 。 

9 STEP 05 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “ 字 体系 列 ” 为 “ 叶 根 友 毛 笔 行 书 2.0 版 ”、“ 字 体 大 小 ”为 72 点 、“ 行 距 ” 为 “自动 ” 、“ 设 置 所 
选 字符 的 字 距 调整 为 0、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 235 ) ， 如 图 11-92 所 示 。 

9 STEP 06 输入 相应 的 文本 ， 在 文字 工具 属性 栏 中 设置 “居中 对 齐 文本 ”， 并 调整 文字 至 适当 位 置 ， 效 
果 如 图 11-93 所 示 。 
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五 后 
美国 英语 
图 11-91 调整 图 像 图 11-92 设置 字符 选项 图 11-93 输入 文本 


9 STEP 07 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ，@ 在 渐变 条 上 设置 暗 黄 、 金 色 、 浅 
黄 、 金 色 、 暗 黄 的 渐变 ( RGB 参 数值 分 别 为 153、81、35; 236、198、43; 247、240、181 ) ; @ 单 击 
新建” 按钮， 新 建 渐变 预 设 ， 如 图 11-94 所 示 。 

9 STEP 08 展开 “图 层 ” 面 板 ， 双 击 “ 七 夕 情人 节 ” 文 字 图 层 空 白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 
中 ， 加 选中 “渐变 到 加 ” 复 选 框 ; 四 设置 “混合 模式 ”为 “正片 释 底 ”、“ 不 透明 度 ” 为 100%、“ 渐 
变 ” 选 择 新 建 的 渐变 色 ( 暗 黄 、 人 金色、 浅黄、 金色 、 暗 黄 的 渐变 色 ) 、“ 样 式 ” 为 “线性 ”、“ 和 角 
度 ” 为 -49 度 、“ 缩 放 ” 为 100%， 如 图 11-95 所 示 。 
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垃 置 (C): 100 为 


图 11-94 ”新建 渐变 预 设 图 11-95 ”设置 图 层 样式 
9 STEP 09 单 击 “确定 ”按钮 为 图 层 添加 渐变 苔 加， 效果 如 图 11-96 所 示 。 
9 STEP 10 双击 “七 夕 情人 节 ” 文 字 图 层 右 侧 的 “指示 图 层 效果 ”按钮 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 
中 ，@ 选 中 “投影 ” 复 选 框 ， 合 设置 “混合 模式 ”为 “正片 苔 底 ”、“ 阴 影 颜色 ”为 黑色 ( RGB 人 参数 


Photoshop 
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值 均 为 0 ) 、“ 不 透明 度 ” 为 100%、“ 角 度 ” 为 138 度 、“ 距 离 ” 为 14 像 素 、“ 扩 展 ” 为 0、“ 大 小 ” 
为 18 像 素 ， 如 图 11-97 所 示 。 


图 11-97 设置 图 层 样式 


图 11-96 添加 渐变 党 加 
9 STEP 11 单 击 “确定 ”按钮 为 图 层 添加 投影 ， 效 果 如 图 11-98 所 示 。 
9 STEP 12 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ” |“ 字符 ”命令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “ 字 体系 列 ” 为 “时 根 友 毛笔 行书 2.0 版 ”、“ 字 体 大 小 ”为 20.71 点 、“ 行 距 ” 为“ 自动” 、“ 设 
置 所 选 字符 的 字 距 调整 ”为 75、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 11-99 所 示 。 
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图 11-99 设置 字符 选项 


图 11-98 添加 投影 
9 STEP 13 输入 相应 文本 ， 并 调整 文字 至 适当 的 位 置 ， 效 果 如 图 11-100 所 示 。 
e@eSTEP 14 展开 “图 层 ” 面 板 ， 双 击 输 入 的 文字 图 层 空白 处 ， 在 弹出 的 图 层 样 式 对 话 框 中 ，@ 选 中 “ 渐 
变 芭 加 ” 复 选 框 ， 人 设置 “混合 模式 ”为 “正片 芭 底 ”、“ 不 透明 度 ” 为 100%、“ 渐 变 ” 选 择 新 建 的 
渐变 色 ( 上 暗 黄 、 金 色 、 浅 黄 、 金 色 、 暗 黄 的 渐变 色 ) 、“ 样 式 ” 为 “线性 ”、“ 和 角度 ”为 0 度 、“ 缩 


放 ” 为 150%， 如 图 11-101 所 示 。 
© STEP 15 单 击 “ 确 定 ”按钮 为 图 层 添 加 渐变 到 加 ， 效 果 如 图 11-102 所 示 。 


e@eSTEP 16 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 和 设置 “字体 系列 ”为 “隶书 ”、 
“字体 大 小 ”为 30 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 73、“ 颜 色 ” 为 深 紫色 


( RGB 参数 值 分 别 为 71、59、141 ) ; 四 并 激活 仿 粗 体 图 标 ， 如 图 11-103 所 示 。 
eSTEP 17 输入 相对 应 的 文本 ， 并 调整 文字 至 适当 的 位 置 ， 效 果 如 图 11-104 所 示 。 
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图 11-102 添加 渐变 登 加 图 11-103 设置 字符 选项 图 11-104 输入 文本 
9 STEP 18 在 “字符 ”面板 中 ， 引 设置 “字体 系列 ”为 “隶书 ”、 “字体 大 小 ”为 48 点 、“ 行 跑 ”为 
“自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 75、“ 颜 色 ” 为 深 紫 色 ( RGB 参 数值 为 71、59、141 ) ; 

四 并 激活 仿 粗 体 图 标 ， 如 图 11-105 所 示 。 

9 STEP 19 输入 相应 的 文本 ， 并 调整 文字 至 适当 的 位 置 ， 效 果 如 图 11-106 所 示 。 

e STEP 20 选取 工具 箱 中 的 直 排 文字 工具 ， 在 “字符 ”面板 中 ， 和 设置 “字体 系列 ”为 “隶书 ”、 
“字体 大 小 ”为 30 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 75、“ 颜 色 ” 为 深 紫色 
( RGB 参 数值 分 别 为 71、59、141 ) ; 四 并 激活 仿 粗 体 图 标 ， 如 图 11-107 所 示 。 
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图 11-105 设置 字符 选项 图 11-106 输入 文本 图 11-107 设置 字符 选项 
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9 STEP 21 输入 相应 的 文本 ， 并 调整 文字 至 适当 的 位 置 ， 效 果 如 图 11-108 所 示 。 

9 STEP 22 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 引 设置 “字体 系列 ”为 “黑体 ”、 
“字体 大 小 ”为 14 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字 符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 深 紫 色 
( RGB 参数 值 分 别 为 71、59、141 ) ; 四 并 激活 仿 粗 体 图 标 ， 如 图 11-109 所 示 。 

9 STEP 23 输入 相应 的 文本 ， 并 调整 文字 至 适当 的 位 置 ， 效 果 如 图 11-110 所 示 。 
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图 11-108 输入 文本 图 11-109 设置 字符 选项 图 11-110 输入 文本 

9 STEP 24 选取 工具 箱 中 的 和 窍 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
无 、“ 摘 边 ” 为 红色 ( RGB 参数 值 分 别 为 235、0、0 ) 、“ 描 边 宽度 ”为 10 像 素 ， 在 图 像 编辑 窗口 中 
绘制 一 个 如 图 11-111 所 示 的 和 矩 形 ， 得 到 “ 甜 形 2” 图 层 。 

9 STEP 25 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
红色 ( RGB 参 数值 分 别 为 255、0、0 ) 、“ 描 边 ” 为 无 、 在 图 像 编辑 窗口 中 绘制 一 个 和 矩形， 得 到 “ 甜 
形 3” 图 层 ， 效 果 如 图 11-112 所 示 。 

9 STEP 26 在 图 像 编辑 窗口 中 选中 “ 甜 形 3” 图 层 所 对 应 的 图 像 ， 选 取 工 具 箱 中 的 直接 选择 工具 ， 用 鼠 
标 左 键 单 击 窍 形 图 像 右 上 角 的 销 点 ， 如 图 11-113 所 示 。 
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一 < | 绘制 | ek 一 [绘制 一 到 < 一 | 选择 
图 11-111 绘制 矩形 图 11-112 ”绘制 矩形 图 11-113 ”选择 锚 点 
9 STEP 27 按 Delete 键 ， 删 除 锚 点 ， 得 到 一 个 正三 角形 ， 并 按 Enter 键 确认 删除 ， 效 果 如 图 11-114 


所 示 。 


加 
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9 STEP 28 按 Ctrl 十 TT 组合 键 调 出 变换 控制 框 ， 适 当 调整 并 旋转 图 像 至 合适 的 位 置 ， 效 果 如 图 11-115 


所 示 。 
ce 人 
一 | 删除 一 | 调整 
图 11-114 删除 锚 点 图 11-115 调整 图 像 
9 STEP 29 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 14 点 、“ 行 距 ” 为 “自动 ” 、“ 设 置 所 选 字符 的 字 距 调 


整 ”为 0(、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 255、0、0 ) ， 并 激活 仿 粗 体 图 标 ， 如 图 11-116 所 示 。 
9 STEP 30 输入 相应 的 文本 ， 适 当 调 整 文本 图 像 的 位 置 ， 效 果 如 图 11-117 所 示 。 


4 半 
字符 段落 至 
里 体 v v 
FT 14 点 “夫人 自动 ~ 
VA 0 v 0 v 
设置 最 0% v | 
IT 100% T1000% || 
sos 7: 


浪漫 情人 节 ， 给 力 77 
fliedt AaaT lt ., 
美国 英语 vi aa li 平 骨 > 

图 11-116 设置 字符 选项 图 11-117 输入 文本 


11.3.3 ” 廊 计 情人 万 情侣 闪 卯 效果 


青 人 节 少不了 的 主角 便 是 情侣 ， 所 以 在 设计 情人 节 页 面 时 ， 可 以 适当 在 页 面 空白 “总 s 汐 人 
处 添加 情侣 装饰 。 下 面 详 细 介 绍 设计 情人 节 情 侣 装饰 效果 的 方法 。 其 操作 步骤 如 下 。 Dt > 
e STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 情 侣 1.psd” 素 材 图 像 ， 用 移动 工具 拖 曙 图 像 至 图 扫 码 看 视频 


像 编 辑 窗 口中 合适 的 位 置 ， 并 将 图 层 命 名 为 “情侣 1”， 效 果 如 图 11-118 所 示 。 
9 STEP 02 展开 “图 层 ` 面板， 选中 “情侣 1” 图 层 ， 用 鼠标 拖 遇 图 层 至 “七 夕 情 人 节 ” 文 字 图 层 的 下 


方 ， 如 图 11-119 所 示 。 
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3D | 图 层 | 通 首 去 
Pp ~ 加 GT5R 9 
正常 v| 不 和 明度 : 100% | ~ 
祝 定 : 图 ss 朱 柱 个 注 讽 : 100% ~ 
@ 工 七 少 情 人 节 re 
人 @ 浆果 
信 潭 变 膨 加 
© 抽 
-日 十 
© 国 E2 
© I 十 
© 阅 ss @、 
e| | 智能 港 各 
信 曲线 
© ES 自 
cx OO 外 司 合 
图 11-118 拖 旨 图 像 图 11-119 ” 拖 旨 图 层 


[ 


ER 在 Photoshop CC 2018 工 作 界 面 中 ,调整 图 层 顺序 的 方法 有 : 上 下 拖 慢 来 改变 . 
过 家 指 后 ， 图 层 顺 序 ; 选择 “图 层 " | “排列 ”命令 中 的 选项 ， 来 调整 图 层 版 序 ， 先 中 要 移动 
: 的 图 层 ， 按 Ctrl 十 ] 组 合 键 前 移 一 层 、Ctrl 十 [ 组 合 键 后 移 一 层 、Ctrl 十 Shift 十 ] 组 合 键 置 为 顶层 、 
Ctrl 十 Shift 十 [ 组 合 键 置 为 底层 。 


e STEP 03 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 旋转 图 像 至 如 图 11-120 所 示 


的 角度 。 
9 STEP 04 在 “图 层 ” 面 板 中 ， 双 击 “ 情 侣 1” 图 层 空白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ，@ 选 
中 “投影 ” 复 选 框 ， 全 设置 “混合 模式 ”为 “正片 又 底 ”、“ 阴 影 颜色 ”为 黑色 ( RGB 参 数值 均 为 
0 ) 、“ 不 透明 度 ” 为 100%、 “角度 ” 为 138 度 、“ 距 离 ” 为 14 像 素 、“ 扩 展 ” 为 0、“ 大 小 ”为 18 像 
素 ， 如 图 11-121 所 示 。 


新 建 样式 (W]... 
祯 览 (V) 


图 屋 控 空投 影 (U) 
设置 为 野 认 值 居 生 为 点 认 值 


图 11-120 调整 图 像 图 11-121 设置 图 层 样式 


e@e STEP 05 单 击 “确定 ”按钮 为 图 层 添 加 投影 ， 效 果 如 图 11-122 所 示 。 
9 STEP 06 按 Ctrl 十 O 组 合 键 ， 打开“ 情侣 2.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 蝶 至 图 像 编辑 窗口 中 


合适 的 位 置 ， 并 将 图 层 命名 为 “ 情 但 2”， 效 果 如 图 11-123 所 示 。 
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2 Pp | p> 


图 11-122 ”添加 投影 图 11-123 拖 昌 图像 
9 STEP 07 展开 “图 层 ” 面 板 ， 按 住 Ctrl 键 的 同时 ， 用 鼠标 左 键 单 击 “情侣 2” 图 层 左 侧 的 “图 层 缩 览 
图 ”， 将 图 像 载 入 选区 ， 并 填充 为 深 紫色 ( RGB 参 数值 分 别 为 71、59、141 ) ， 效 果 如 图 11-124 
所 示 。 
9 STEP 08 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 11-125 所 示 。 
9 STEP 09 按 Ctrl 十 O 组 合 键 ， 打开 “爱心 2.psd” 素 材 图 像 ， 用 移动 工具 将 图 像 拖 中 至 图 像 编辑 窗 口中 
合适 的 位 置 ， 效 果 如 图 11-126 所 示 。 至 此 ， 完 成 情人 节 H5 页 面 设计 。 


填充 


Ey 
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把 爱 送 给 她 > 
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图 11-124 填充 图 像 图 11-125 ”调整 图 像 图 11-126 拖 旭 图 像 


邀请 函 是 一 场 会 议 中 非常 重要 的 一 部 分 ， 在 商业 社交 活动 中 ， 邀 请 函 
的 使 用 范围 非常 广泛 ， 使 用 频率 也 非常 高 。 与 以 往 不 同 的 是 ， 随 着 时 代 的 发 
书信 方式 的 邀请 函 已 逐渐 被 HS 界面 的 互联 网 邀请 函 替 代 。 本 章 主 要 介绍 

见 邀 请 函 HS 广 告 设计 方法 。 


企业 年 会 : 治 握 年 会 邀请 函 的 H5 页 面 设计 
招商 加 盟 : 和 车 握 招商 邀请 图 的 H5 页 面 设 计 
颁奖 晚会 ， 旱 握 久 奖 典礼 邀请 函 的 H5 页 面 设计 
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第 12 章 “会 议 邀 请: 年 会 晚会 邀请 函 的 H5 广 告 设计 


本 天 企业 年 会 : 掌握 年 会 邀请 函 的 H5 页 面 设计 


年 会 邀请 函 是 企业 举办 年 会 时 对 公司 内 部 人 员 以 及 一 些 合作 企业 发 出 的 请 约 性 书信 ， 多 为 年 终 大 
型 活动 晚会 。 
本 实例 的 最 终 效 果 如 图 12-1 所 示 。 


图 12-1 实例 效果 


素材 文件 | 素材 \ 第 12 章 \ 边 框 .psd、 标 志 .psd、 花 纹 .psd、 文 字 .psd 
效果 文件 | 效果 \ 第 12 章 \ 掌 握 年 会 邀请 函 H5 页 面 设计 .psd、 掌 握 年 会 邀请 函 H5 页 面 设计 .jpg 


12.1.1 设计 年 会 邀请 函 欧 式 边 框 效 果 


边框 往往 是 年 会 邀请 函 设 计 必 不 可 少 的 一 个 组 成 部 分 ， 一 个 好 看 的 邀请 函 的 边框 能 

够 起 到 点 睛 效果 。 下 面 详细 介绍 设计 年 会 邀请 函 欧 式 边框 效果 的 方法 。 其 操作 步骤 如 下 。 。 同 趾 (六 才 浊 

9 STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 扫 码 看 视频 
为 “掌握 年 会 邀请 函 H5 页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 
像素 /英寸 、“ 颜 色 模 式 ” 为 “RGB 颜色 ”、“ 背 景 内容 ” 为 “白色 ”， 如 图 12-2 所 示 ; 人 @ 单 击 “ 创 
建 ”按钮 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 展开 “图 层 ” 面板 ， 新 建 “图 层 1” 图 层 ， 设 置 前 景色 为 黑色 ( RGB 参数 值 均 为 0 ) ， 为 “图 
层 1” 图 层 填充 黑色 ， 如 图 12-3 所 示 。 

9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “ 边 框 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 得 到 “边框 ”图 层 ， 效 果 如 图 12-4 所 示 。 

9 STEP 04 复制 “边框 ”图 层 ， 得 到 “边框 拷贝 ”图 层 ， 垂 直 翻 转 拷 贝 的 图 像 并 移动 至 合适 位 置 ， 效 果 


如 图 12-5 所 示 。 


Photoshop 
H5 广 告 设计 


图 12-3 填充 颜色 图 12-4 拖 慢 图像 图 12-5 移动 图 像 

9 STEP 05 选中 “边框 ”图 层 ， 选 取 工 具 箱 中 的 和 矩形 选 框 工具 ， 在 图 像 编辑 窗口 中 绘制 一 个 和 矩 形 选 框 ， 
如 图 12-6 所 示 。 

9 STEP 06 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调整 选区 内 图 像 的 大 小 ， 如 图 12-7 所 示 。 

9 STEP 07 在 变换 控制 框 内 双击 鼠标 左 键 ， 即 可 确认 变换 ， 按 Ctrl 十 D 组 合 键 取消 选区 ， 效 果 如 图 12-8 
所 示 。 


图 12-6 绘制 矩形 选 框 图 12-7 调整 选区 内 图 像 大 小 图 12-8 取消 选区 
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ET -) 在 Photoshop CC 2018 工 作 界 面 中 ， 按 Ctrl 十 T 组 合 键 可 以 调用 “自由 变换 ” 命 、 
指点 令 ， 也 可 以 选择 “编辑 ”|“ 自 由 变换 ”命令 ,然后 等 待 所 选 图 层 调 出 变换 控制 框 
: 时 调 整 图 像 O : 
9 STEP 08 用 与 上 同样 的 方法 制作 出 另 一 侧 的 边框 ， 效 果 如 图 12-9 所 示 。 


9 STEP 09 选中 “边框 拷贝 ”图 层 ， 用 橡皮 擦 工具 擦 去 底部 中 间 的 装饰 图 案 ， 如 图 12-10 所 示 。 
9 STEP 10 用 算 形 选 框 工具 和 “自由 变换 ”功能 调整 图 像 ， 效 果 如 图 12-11 所 示 。 


图 12-9 ”图 像 效 果 图 12-10 ” 探 除 图 像 图 12-11 调整 图 像 


12.1.2 设计 年 会 邀请 函 主 题 内 容 效 果 


年 会 邀请 函 标 志 是 邀请 函 必 不 可 少 的 一 个 组 成 部 分 ， 标 志 能 够 让 受 邀 者 明白 活动 
的 组 办 单位 ， 同 时 简单 明了 的 邀请 信息 也 能 使 受 邀 者 明确 活动 的 主要 内 容 。 下 面 详细 
介绍 设计 年 会 邀请 函 主 题 内 容 效 果 的 方法 。 其 操作 步骤 如 下 。 

9 STEP 01 选择 “文件 ” | “打开 ”人 命令， 打开“ 标志 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 曙 至 背 
景 图 像 编 辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 12-12 所 示 。 

9 STEP 02 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编 辑 器 ”对 话 框 ，@@ 在 渐变 条 上 设置 暗 黄 、 金 色 、 沽 
黄 、 金 色 、 暗 黄 的 渐变 ( RGB 参 数值 分 别 为 153、81、35; 236、198、43; 247、240、181 ) ; 人 @ 单 击 
“新建 ” 按 钮 ， 新 建新 变 预 设 ， 如 图 12-13 所 示 。 

9 STEP 03 选取 工具 箱 中 的 和 窍 形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ” 为 渐变 ，@@ 在 “ 渐 
变 ” 选 项 区 中 选择 新 建 的 暗 黄 、 人 金色、 浅黄、 金色 、 上 暗 黄 渐变 色 ; 四 设置 “旋转 渐变 ”为 S1， 如 
图 12-14 所 示 。 

9 STEP 04 在 工具 属性 栏 中 设置 “ 描 边 宽度 ”为 4 像素 ， 并 新 建 “和 窍 形 1” 图 层 ， 在 图 像 编 辑 窗 口中 绘 
制 一 个 矩形， 如 图 12-15 所 示 。 

e@e STEP 05 复制 “ 答 形 1” 图 层 ， 得 到 “ 答 形 1 拷贝 ”图 层 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 按 
住 Shift 十 Alt 组 合 键 的 同时 ， 从 中 心 缩 小 图 像 ， 并 按 Enter 键 确认 变换 ， 效 果 如 图 12-16 所 示 。 


Photoshop 
H5 广 告 设 


所 :El 位 置 (0): |100 |% 是 除 [D) 


图 12-12 ” 拖 旭 图 像 图 12-13 ”新 建 渐变 预 设 


有 明 司 月 和 2 中 


4 妊 . 


编 激 : 100 % 国 与 图 层 对 齐 


图 12-14 选择 相应 渐变 色 图 12-15 ”绘制 矩形 图 12-16 缩小 图 像 
9 STEP 06 选取 工具 箱 中 的 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 渐变 ， 在 “渐变 ”选项 区 中 选择 
新 建 的 暗 黄 、 人 金色、 浅黄、 金色 、 暗 黄 渐变 色 ， 设 置 “旋转 渐变 ”为 0、“ 描 边 ” 为 无 ， 并 新 建 一 个 
“矩形 2” 图 层 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形 ， 如 图 12-17 所 示 。 
9 STEP 07 复制 “和 矩形 2” 图 层 ， 得 到 “和 矩形 2 乒 贝 ”图 层 ， 并 适当 调整 图 像 的 位 置 ， 效 果 如 图 12-18 
所 示 。 


图 12-17 ”绘制 矩形 图 12-18 调整 图 像 位 置 
9 STEP 08 按 Ctrl 十 O 组 合 键 ， 打 开 “ 文 字 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
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窗口 中 ， 并 按 Ctrl 十 G 组 合 键 进行 编组 ， 得 到 “文字 ”图 层 组 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 
调整 图 像 大 小 及 位 置 ， 效 果 如 图 12-19 所 示 。 

e@ STEP 09 双击 “文字 ”图 层 组 ， 弹 出 “图 层 样式 ”对 话 框 ， 选 中 “渐变 又 加 ” 复 选 框 ， 选 择 新 建 的 暗 
黄 、 金 色 、 浅 黄 、 金 色 、 暗 黄 渐变 色 ， 并 设置 “角度 ”为 0 度 ， 单 击 “ 确 定 ”按钮 ， 效 果 如 图 12-20 
所 示 。 

9 STEP 10 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 渐变 ， 在 “渐变 ”选项 区 中 选择 
新 建 的 暗 黄 、 人 金色、 浅黄、 金色 、 暗 黄 渐变 色 ， 设 置 “旋转 渐变 ”为 0、“ 描 边 ” 为 无 ， 在 图 像 编 辑 
窗口 中 绘制 一 个 圆 形 ， 并 选取 图 层 “ 函 ”设置 为 黑色 ， 置 于 绘制 的 渐变 圆 形 图 层 上 方 ， 效 果 如 图 12-21 
所 示 。 
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图 12-19 ” 拖 旭 图 像 图 12-20 添加 图 层 样 式 图 12-21 绘制 渐变 圆 形 图 层 


专家 指 ei i en) 在 Photoshop CC 2018 工 作 界 面 中 ,双击 图 层 组 ,或 在 图 层面 板 下 方 单 击 “ 添 : 
把 加 图 层 样式 ”按钮 六 ， 都 可 以 弹出 “图 层 样式 ”对 话 框 。 设 置 好 参数 之 后 ， 图 层 相 
”对 应 下 方 ， 便 会 显示 添加 的 效果 “指示 图 层 可 见 性 ”按钮 @ ， 单 击 @ 按钮 ， 隐 藏 效果 ， 可 以 对 
” 比 设置 前 后 的 效果 。 : 


12.1.3 ”设计 年 会 邀请 函 底 部 装饰 效果 


邀请 函 的 装饰 效果 是 设计 的 重 中 之 重 ， 一 个 好 的 邀请 函 ， 必 然 要 有 好 的 装饰 效 和 
果 ， 单 纯 的 文字 信息 会 使 受 邀 者 厌烦 ， 但 过 于 花哨 的 效果 也 不 会 给 人 好 感 。 下 面 详细 四 和 5 
介绍 设计 年 会 邀请 函 底 部 装饰 效果 的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 

e STEP 01 选取 工具 箱 中 的 窍 形 选 框 工 具 ， 在 图 像 编辑 窗口 中 绘制 一 个 矩形 选 框 ， 如 图 12-22 所 示 。 

9 STEP 02 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 在 渐变 条 上 设置 金色 、 黄 色 、 暗 
黄 、 黄 色 、 人 金色 的 渐变 ( RGB 参 数值 分 别 为 201、151、15; 225、220、59; 147、106、16 ) ， 如 
图 12-23 所 示 。 

9 STEP 03 单 击 “ 确 定 ” 按 钮 ， 新 建 “ 和 矩 形 3” 图 层 ， 在 选区 内 从 左 至 右 填 充 线性 渐变 色 ， 并 取消 选 
区 ， 效 果 如 图 12-24 所 示 。 

9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 花 纹 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 像 编辑 窗 


Photoshop 
H5 广 告 设计 


口中 ， 得 到 “花纹 ”图 层 ; 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 果 如 图 
12-25 所 示 。 
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图 12-22 ”绘制 矩形 选 框 


图 12-24 填充 渐变 图 12-25 拖 虽 图 像 
© STEP 05 双击 “花纹 ”图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 为 图 层 添加 “投影 ”图 层 样 式 ， 设 置 参 数 及 
效果 如 图 12-26 所 示 。 至 此 ， 完 成 年 会 邀请 函 的 HS 页 面 设 计 。 
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图 12-26 设置 图 层 样式 参数 及 效果 
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轿 区 现 ] 招商 加 盟 : 掌握 招商 邀请 函 的 H5 页 面 设计 


招商 加 盟 是 企业 营销 中 的 有 效 环节 ， 同 时 也 是 展示 企业 实力 及 发 展 前 景 的 一 个 机 会 ， 吸 引 加 盟 
商 ， 让 他 们 付款 进货 ， 是 企业 营销 发 展 的 一 种 手段 。 
本 实例 最 终 效果 如 图 12-27 所 示 。 
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图 12-27 ”实例 效果 


效果 文件 | 效果 \ 第 12 章 \ 掌 握 招 商 邀 请 函 H5 页 面 设计 .psd、 掌 握 招 商 邀 请 函 H5 页 面 设计 .jpg 


12.2.1 设计 招商 邀请 孙 育 景 奔 纹 效果 


邀请 函 的 背景 效果 是 整个 邀请 函 的 主体 ， 在 设计 时 要 根据 不 同 主题 来 定位 ， 不 能 Ee 
过 于 显眼 ， 叉 不 能 过 于 平庸 。 下 面 详细 介绍 设计 招商 邀请 函 背 景 效 果 的 方法 。 其 操作 扫 码 看 视频 
步骤 如 下 。 

e STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “掌握 招商 邀请 
沙 H5 页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 像 素 / 英 寸 、“ 颜 色 
模式 ”为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 12-28 所 示 ; 外 单 击 “ 创 建 ”按钮 ， 新 建 一 个 
空白 图 像 。 

9 STEP 02 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编 辑 器 ”对 话 框 ， 在 渐变 条 上 设置 红 到 暗 红 的 渐变 
( RGB 人 参数 值 分 别 为 249、3、21; 151、0、7 ) ， 并 单 击 “ 新 建 ” 按 钮 ， 新 建 渐变 预 设 ， 如 图 12-29 所 示 。 

e STEP 03 单 击 “确定 ”按钮 ， 新 建 “ 图 层 2” ， 在 工具 属性 栏 中 设置 径 向 渐变 ， 在 图 像 编 辑 窗口 中 从 
右 至 左 填充 线性 渐变 ， 效 果 如 图 12-30 所 示 。 

9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 底 纹 .jpg” 素 材 图 像 ， 解 锁 图 层 ， 运 用 移动 工具 将 素材 图 像 拖 蝶 至 
9 景 图 像 编辑 窗口 中 ， 得 到 “ 底 纹 ” 图 层 ， 适 当 调 整 图 像 位 置 ， 接 着 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 
框 ， 适 当 调 整 选区 内 图 像 的 大 小 ， 效 果 如 图 12-31 所 示 。 
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图 12-28 设置 “新 建文 档 ” 对 话 框 
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天 lS 
图 12--29 新 建 渐变 预 设 图 12-30 填充 渐变 图 12-31 拖 慢 调整 图 像 

9 STEP 05 选择 “ 底 纹 ”图 层 ， 选 择 “ 图 像 ”|“ 调 整 ”|“ 黑 白 ” 人 命令， 弹出 “黑白 ”对 话 框 ， 选 择 默 
认 参 数值 ， 单 击 “ 确 定 ”按钮 ， 如 图 12-32 所 示 。 

9 STEP 06 在 “图 层 ” 面 板 中 ， 将 图 层 的 “不 透明 度 ” 设 置 为 4%， 效 果 如 图 12-33 所 示 。 

9 STEP 07 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ，@@ 在 渐变 条 上 设置 金色 、 浅 黄 、 金 
色 的 渐变 ( RGB 参 数值 分 别 为 236、198、43; 247、240、181 ) ; 四 并 单 击 “新 建 ”按钮 ， 新 建 渐变 
预 设 ， 如 图 12-34 所 示 。 
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图 12-32 ”调整 底 纹 效果 图 12-33 ”设置 图 层 的 不 透明 度 图 12-34 新 建 渐 变 预 设 


9 STEP 08 新 建 “ 形 状 1” 图 层 ， 选 取 工 具 箱 中 的 钢笔 工具 绘制 一 个 选区 ， 如 图 12-35 所 示 。 
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9 STEP 09 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编 辑 器 ”对 话 框 ， 选 择 新 建 的 金色 、 浅 黄 、 金 色 的 渐 
变 预 设 ， 在 选区 内 从 左 至 右 填 充 线性 渐变 色 ， 取 消 选 区 ， 效 果 如 图 12-36 所 示 。 

9 STEP 10 复制 “形状 1” 图 层 ， 得 到 “形状 1 拷贝 ”图 层 ， 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 
调整 图 像 位 置 ， 并 填充 浅黄 色 ( RGB 参数 值 分 别 为 247、239、177 ) ， 然 后 置 于 “形状 1” 图 层 下 方 ， 
效果 如 图 12-37 所 示 。 


图 12-35 ”绘制 选区 图 12-36 ”填充 线性 渐变 图 12-37 调整 填充 图 像 

9 STEP 11 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 人 @ 在 渐变 条 上 设置 暗 黄 、 金 色 、 沽 
黄 、 金 色 、 暗 黄 的 渐变 ( RGB 参 数值 分 别 为 181、81、35; 236、198、43; 247、240、181 ) ; 四 并 单 
击 “新 建 ” 按 钮 ， 新 建 渐 变 预 设 ， 如 图 12-38 所 示 。 

9 STEP 12 新 建 “ 渐 变 曲线 ”图 层 ， 选 取 工 具 箱 中 的 钢笔 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、 
“ 描 边 ”为 渐变 ， 在 “渐变 ”选项 区 中 选择 新 建 的 暗 黄 、 人 金色、 浅黄、 金色 、 暗 黄 渐变 色 ， 设置 “对 
称 渐变 ”旋转 角度 为 900、“ 描 边 ” 像 素 为 7， 并 在 “形状 1” 图 层 上 方 绘制 一 条 渐变 曲线 ， 效 果 如 图 
12-39 所 示 。 

9 STEP 13 展开 “图 层 ” 面板 ， 复 制 “ 渐 变 曲线 ”图 层 ， 得 到 “渐变 曲线 拷贝 ”图 层 ， 按 Ctrl 十 T 组 合 
键 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 ， 效 果 如 图 12-40 所 示 。 


在 Photoshop CC 2018 工 作 界面 中 ， 使 用 钢笔 工具 能 够 绘制 选区 、 路 径 、 像 素 
| 等 形状 线条 。 通 过 添加 错 点 、 转 换 错 点 、 拖 动 错 点 等 操作 ， 可 以 绘制 不 规则 形状 


图 12-38 ”新建 渐 变 预 设 图 12-39 ”绘制 渐变 曲线 图 12-40 复制 调整 曲线 
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12.2.2 访 计 招商 邀请 困 文 子 三 告 信息 


简单 明了 的 邀请 函 信息 能 够 使 受 邀 者 读 懂 邀 请 函 的 主要 内 容 ， 过 多 过 杂乱 的 内 容 也 “共有 生 时 称 
容易 引 使 人 反感 。 下 面 详细 介绍 设计 招商 邀请 函 文字 广告 信息 的 方法 。 其 操作 步骤 如 下 。 ” 辐 叶 过 志 性 
e@e STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “文字 2.psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 扫 码 看 视频 
忠 至 背景 图 像 编辑 窗口 中 ， 按 Ctrl 十 G 组 合 键 将 文字 进行 编组 ， 得 到 “文字 2” 图 层 组 ， 适 当 调 整 图 像 
的 位 置 ， 效 果 如 图 12-41 所 示 。 
e STEP 02 双击 “文字 2” 图 层 组 ， 弹 出 “图 层 样式 ”对 话 框 ， 选 中 “投影 ” 复 选 框 ， 在 其 中 设置 “ 混 
合 模式 ”为 “正片 到 底 ”、“ 不 透明 度 ”为 49%、 “角度 ”为 90、“ 距 离 ” 为 16 像 素 、“ 扩 展 ” 为 
7%、 “大 小 ”为 81 像 素 ， 设 置 完 成 后 单 击 “ 确 定 ”按钮 ， 效 果 如 图 12-42 所 示 。 
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图 12-41 拖 幼 文字 图 12-42 设置 文字 图 层 样式 


9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “ 文 字 3.psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 
辑 窗口 中 ， 并 按 Ctrl 十 G 组 合 键 ， 将 文字 进行 编组 得 到 “文字 3” 图 层 ， 适 当 调 整 图 像 位 置 ， 效 果 如 
图 12-43 所 示 。 

9 STEP 04 展开 “图 层 ” 面 板 ， 复 制 “ 文 字 3” 图 层 组 ， 得 到 “文字 3 拷贝 ” 图 层 组 ， 按 Ctrl 十 IT 组 合 键 
调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 ， 并 设置 文字 颜色 为 暗 黄 色 ( RGB 参数 为 134、134、5 ) ， 效 果 
如 图 12-44 所 示 。 
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图 12-43 ” 拖 旨 文字 图 12-44 复制 拖 旨 填充 文字 
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12.2.3 设计 招商 邀请 函 个 性 化 纹 效果 


适当 的 花纹 装饰 效果 体现 企业 的 独特 性 。 下 面 详 细 介绍 设计 招商 邀请 函 个 性 花纹 效果 ” 回 密 en: 
的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 
e STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 梅 兰 竹 菊 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 
编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 并 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 ， 效 果 如 
图 12-45 所 示 。 
9 STEP 02 按 Ctrl 十 0 组合 键 ， 打 开 “ 标 志 2.psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 
辑 窗 口中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 12-46 所 示 。 


UOI}B}IAUI 
GOI3B]IAUI 


图 12-45 ”调整 图 像 图 12-46 拖 包 图 像 
9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “ 飘 云 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 抱 蝶 至 背景 图 像 编 辑 
窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 选 择 “ 编 辑 ”|“ 变 换 ”|“ 水 平 翻转 ”命令 ， 使 图 像 水 平 翻转 ， 效 果 如 
图 12-47 所 示 。 
9 STEP 04 展开 “图 层 ” 面板， 在 “文字 2” 图 层 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 拷 幢 图 
层 样 式 ” 命 令 拷贝 图 层 样 式 ， 然 后 在 “图 层 4” 图 层 上 粘贴 图 层 样式 ， 效 果 如 图 12-48 所 示 。 至 此 ， 完 
成 招商 邀请 函 H5 页 面 设计 。 
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图 12-47 拖 提 图 像 图 12-48 ”拷贝 粘贴 图 层 样 式 
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国 区 素 】 需 奖 晚 会 : 掌握 颁奖 典礼 洲 请 酉 的 H5 页 面 设计 


颁奖 典礼 在 当今 社会 中 ， 己 经 成 为 一 种 趋势 ， 小 到 公司 ， 大 到 媒体 ， 通 常 每 年 都 会 举行 颁奖 典 
礼 。 那 么 在 这 种 面 同 大 众 媒 体 ， 甚 至 是 电视 直播 的 颁奖 典礼 时 ， 典 礼 邀 请 函 就 充当 着 一 个 很 重要 
的 角色 。 

本 实例 最 终 效 果 如 图 12-49 所 示 。 


12.3.1 设计 颁奖 典礼 邀请 图 诈 转 育 景 效 果 


邀请 函 的 背景 效果 是 邀请 函 整个 设计 的 主体 ， 旋 转 样式 背景 效果 的 制作 ， 能 使 颁 
奖 典 礼 显得 更 华丽 的 。 下 面 详 细 介绍 设计 颁奖 典礼 邀请 图 旋转 背景 效果 的 方法 。 其 操 Er 
作 步 又 如 下 。 扫 码 看 视频 

9 STEP 01 选择 “文件 ” |“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 和 设置“ 名称” 为 “掌握 颁奖 典 

礼 邀请 函 H5 页 面 设 计 ”、 “宽度 ”为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 / 英 寸 、 
“颜色 模式 ”为 “RGB 颜色 ”、“ 青 景 内 容 ” 为 “灰色 ” ( RGB 参数 为 134、154、154 ) ， 如 图 12-50 
所 示 ; 全 单 击 “ 创 建 ” 按 钮 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 选取 工具 箱 中 的 多 边 形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 褐色 ( RGB 参数 为 106、57、 
6 ) 、“ 描 边 ” 为 无 、“ 边 ”为 3， 在 图 像 编 辑 窗口 中 ， 按 住 Shift 键 的 同时 ， 拖 动 鼠 标 绘 制 一 个 正三 角 
形 ， 得 到 “多 边 形 1” 图 层 ， 如 图 12-51 所 示 。 

9 STEP 03 选择 “多 边 形 1” 图 层 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 如 
图 12-52 所 示 。 

© STEP 04 复制 “多 边 形 1” 图 层 ， 得 到 “多 边 形 1 乒 贝 ”图 层 ， 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 使 


bb 
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用 移动 工具 将 图 形 旋转 中 心 拖 至 控制 框 下 方 中 心 位 置 ， 效 果 如 图 12-53 所 示 。 


图 12-50 设置“ 新建 ”对 话 框 


图 12-51 绘制 正三 角形 图 12-52 ”调整 图 像 图 12-53 ”调整 图 像 旋 转 中 心 
9 STEP 05 在 工具 属性 栏 中 设置 “旋转 ”为 15 度 ， 按 Enter 键 确认 旋转 ， 在 变换 控制 框 内 双击 鼠标 左 键 ， 
即 可 确认 变换 ， 效 果 如 图 12-54 所 示 。 
9 STEP 06 按 Shift 十 Ctrl 十 Alt 十 IT 组 合 键 ， 重 复 上 一 步 旋转 变换 ， 直 到 整个 三 角形 做 一 个 360 度 的 旋转 ， 


效果 如 图 12-55 所 示 。 


图 12-54 旋转 图 像 图 12-55 重复 旋转 命令 


Photoshop 


H5 广 告 设计 


ETETTEIETEIITIITIITEIITE TE 


pe 在 Photoshop CC 2018 工 作 界 面 中 ,用户 选择 图 像 后 ， 在 “自由 变换 ”功能 . 
二 家 指点 ) 下 ， 将 鼠标 指针 放置 在 图 像 边 角 处 ， 待 鼠标 指针 变 为 旋转 图 标 国 时 ， 便 可 自由 拖 动 . 
i ”图 像 的 旋转 角度 。 : 


e STEP 07 选取 所 有 三 角形 ， 按 Ctrl 十 6 组合 键 进行 -图 层 编组 ， 得 到 “旋转 图 像 ” 图 层 ， 然 后 按 Ctrl 十 T 
组 合 键 ， 调 出 变换 控制 框 ， 适 当 调整 图 像 位 置 及 大 小 ， 效 果 如 图 12-56 所 示 。 

9 STEP 08 展开 “图 层 ” 面 板 ， 复 制 “ 旋 转 图 像 ” 图 层 ， 得 到 “旋转 图 像 拷贝 ”图 层 ， 并 填充 为 暗 黄色 
( RGB 参数 为 207、169、114 ) ， 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 在 属性 栏 中 设置 “旋转 ” 
为 7.5 度 ， 按 Enter 键 确认 旋转 ， 在 变换 控制 框 内 双击 鼠标 左 键 ， 即 可 确认 变换 ， 效 果 如 图 12-57 
所 示 。 

© STEP 09 按 Shift 十 Ctrl 十 N 组 合 键 ， 弹 出 “新 建 图 层 ” 对 话 框 ， 设 置 “名 称 ” 为 “黑色 不 透明 ”， 单 击 
“确定 ”按钮 ， 新 建 图 层 ， 填 充 为 黑色 ( RGB 参数 均 为 0 ) ， 并 设置 不 透明 度 为 65%， 如 图 12-58 
所 示 。 


复制 填充 旋转 


图 12-56 ”调整 图 像 图 12-57 复制 填充 旋转 图 像 图 12-58 ”新 建 黑 色 不 透明 图 层 


12.3.2 ” 仿 计 颁奖 典礼 邀请 图 内 容 效果 


颁奖 典礼 邀请 函 的 内 容 一 定 要 突出 颁奖 典礼 的 主题 、 地 点 、 时 间 等 重要 信息 ， 让 PR 


受 邀 者 清楚 地 明白 邀请 函 的 大 致 内 容 。 下 面 详细 介绍 设计 颁奖 典礼 邀请 函 内 容 效果 的 “ 央 闻 本 个 竹 
方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 


e@ STEP 01 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 黑色 ( RGB 参数 均 为 0 ) 、“ 描 
边 ” 为 渐变 ，@ 在 “渐变 ”选项 区 中 新 建 金色 、 浅 黄 、 金 色 的 渐变 色 ( RGB 参数 值 为 236、198、43; 
247、240、181; 236、198、43 ) ; 四 设置 “旋转 渐变 ”为 31、“ 描 边 ” 像 素 为 3， 如 图 12-59 所 示 。 

9 STEP 02 按 住 Shif 键 的 同时 ， 在 图 像 编 辑 窗口 中 绘制 一 个 正 圆 ， 效 果 如 图 12-60 所 示 。 


在 Photoshop CC 2018 工 作 界面 中 ,选取 椭圆 工具 ， 按 住 Shift 的 同时 拖 动 图 像 ， : 
[二 家 指点 ) 可 会 制 正 圆 ， 若 同时 按 住 Alt 链 ， 则 可 以 以 圆 点 为 中 心 绘制 正 圆 或 枯 加 。 
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9 STEP 03 按 Ctrl 十 O 组 合 键 ， 打 开 “ 玻 璃 盖 .png” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 电 至 背景 图 像 编 
辑 窗 口中 ， 适 当 调 整 图 像 位 置 及 大 小 ， 效 果 如 图 12-61 所 示 。 


1 
缩放 : 100 ~ % 六 与 图 层 对 


图 12-59 新建 渐 变色 图 12-60 绘制 圆 形 图 12-61 拖 旨 图 像 
9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 奖 杯 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 辑 
窗口 中 ， 适 当 调 整 图 像 的 大 小 及 位 置 ， 效 果 如 图 12-62 所 示 。 
9 STEP 05 按 Ctrl 十 O 组 合 键 ， 打 开 “ 彩 市 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 曙 至 背景 图 像 编 辑 
窗口 中 ， 适 当 调 整 图 像 的 位 置 及 大 小 ， 并 将 图 层 命名 为 “彩带 ”， 效 果 如 图 12-63 所 示 。 
9 STEP 06 复制 “彩带 ”图 层 ， 得 到 “彩带 拷贝 ”图 层 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 
图 像 大 小 及 位 置 ， 效 果 如 图 12-64 所 示 。 


图 12-62 ” 拖 旨 图 像 图 12-63 ” 拖 旨 图 像 图 12-64 ”拷贝 调整 图 像 

9 STEP 07 按 Ctrl 十 O 组 合 键 ， 打 开 “ 文 字 4.psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 
辑 窗 口中 ， 适 当 调 整 图 像 的 位 置 ， 并 按 Ctrl 十 G 组 合 键 将 文字 进行 编组 ， 得 到 “文字 4” 图 层 组 ， 效 果 
如 图 12-65 所 示 。 

9 STEP 08 按 Ctrl 十 O 组 合 键 ， 打开“ 奔跑 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 12-66 所 示 。 

9 STEP 09 展开 “图 层 ” 面 板 ,为 “文字 4” 图 层 添加 “渐变 二 加 ”和 “投影 ”图 层 样 式 ， 参 数 设 置 如 
图 12-67 所 示 。 
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图 12-65 拖 虽 图 像 


新 水 样式 {W) 


回 次 贤 (V) 
”四 与 网 民 对 齐 亿 


严 关 对 齐 


设置 为 点 让 伯 号 位 加 里 认 们 


59 
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E 

E 

E 

- 

E 4 9 ， Me 
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1 口 江汉 而 让 

E 

E 

E 

E 


B 台 加 由 当 详 和 : ， 本 注 撒 上 桔 (D 
1 回 齐 雪 委 加 | 

回 网 层 拉 衬 投 曙 (U) 
刀 首 关 革 从 五 梧 立 为 中 人 质 


图 12-67 添加 图 层 样式 
9 STEP 10 按 Ctrl 十 O 组 合 键 ， 打 开 “ 金 翅 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
窗口 中 ， 适 当 调 整 图 像 的 大 小 及 位 置 ， 并 将 图 层 他 名 为 “ 金 记 ”， 效 果 如 图 12-68 所 示 。 
9 STEP 11 展开 “图 层 ” 面 板 ， 双 击 “ 金 筷 ” 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 选 中 “投影 ” 复 选 框 ， 


在 其 中 设置 “混合 模式 ”为 “正片 翅 底 ”、 
像素 、“ 扩 展 ” 为 0、 
图 12-69 所 示 。 


图 12-68 拖 虽 图像 


“不 透明 度 ” 为 100%、 
“大 小 ”为 29 像 素 ， 单 击 “ 和 确定” 按钮， 为 图 层 添 加 图 层 样 式 ， 效 果 如 


“角度 ”为 138 度 、“ 上 距离 ”为 13 


图 12-69 ”添加 投影 
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12.3.3 ” 仿 计 颁奖 典礼 邀请 图 闪 饰 效果 


颁奖 典礼 邀请 函 的 装饰 效果 要 突出 主题 特色 ， 让 受 邀 者 能 够 清楚 地 明白 这 是 一 份 颁 
奖 典 礼 的 邀请 函 。 下 面 详细 介绍 设计 颁奖 典礼 邀请 函 装 饰 效果 的 方法 。 其 操作 步 台 如 下 。 ; 
9 STEP 01 选取 工具 箱 中 的 和 矩形 选 框 工 具 ， 在 图 像 编辑 窗口 中 绘制 一 个 窍 形 选 框 ， 如 图 扫 码 看 视频 


12-70 所 示 。 
@ STEP 02 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 人 @ 在 渐变 条 上 设置 金色 、 浅 黄 、 金 


色 的 渐变 ( RGB 参 数值 分 别 为 236、198、43; 247、240、181; 236、198、43 ) ; 四 单 击 “ 新 建 ” 按 
钮 ， 新 建 渐 变 预 设 ， 如 图 12-71 所 示 。 


载 入 (0).. 

存 读 (5).… 

名 称 (N): | 自 定 @ 单 二 
渐变 类 型 : 实 底 ~ 
平滑 度 (M): | 100 |~| % 


位 置 (C): | 0) 


图 12-70 绘制 和 矩形 选 框 图 12-71 新建 渐 变 预 设 


9 STEP 03 按 Shift 十 Ctrl 十 N 组 合 键 ， 弹 出 “新 建 图 层 ” 对 话 框 ,设置 “ 名 称 ” 为 “线性 渐变 ”， 单 击 
“确定 ”按钮 ， 新 建 一 个 图 层 ， 在 选区 内 从 左 至 右 填充 线性 渐变 ， 并 按 Ctrl 十 D 组 合 键 取消 选区 ， 效 果 
如 图 12-72 所 示 。 

9 STEP 04 复制 “线性 渐变 ”图 层 ， 得 到 “线性 渐变 拷贝 ”图 层 ， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 
适当 调整 图 像 大 小 及 位 置 ， 效 果 如 图 12-73 所 示 。 

9 STEP 05 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 签 ”命令 ， 在 弹出 的 “字符 ”面板 中 ， 
人 @O 设 置 “ 字 体系 列 ” 为 “楷体 ”、“ 字 体 大 小 ”为 38 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 
距 调整 为 30、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ; 四 并 激活 仿 粗 体 图 标 ， 如 图 12-74 所 示 。 


4 
字符 | 段落 一 
模 体 v v : 
PT 38 点 丛 | 自 动 ~ 
MAo VAES 
1 六 
SH |0% ~ 
IT 100% TL 100% 
钱 0 点 5 : 国 国 国 


bm 


fi et AaaT 1 


美 司 英语 v aa | 锐利 


图 12-72 ”填充 线性 渐变 图 12-73 ”调整 图 像 图 12-74 设置 各 选项 
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9 STEP 06 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 12-75 所 示 。 
9 STEP 07 选取 工具 箱 中 的 横 排 文字 工具 ， 人 @ 在 “字符 ”面板 中 设置 “字体 系列 ”为 SimSun-ExtB、 
“字体 大 小 ”为 18 点 、“ 行 中 ”为 “自动 ”、 设 置 所 选 字 符 的 字 距 调整 为 90、“ 颜 色 ” 为 黑色 ( RGB 
参数 值 均 为 0 ) ; 四 并 激活 仿 粗 体 图 标 ， 如 图 12-76 所 示 。 
© STEP 08 人 并 调整 至 合适 位 置 ， SR 77 所 示 。 


二 所 家) 在 Photoshop CC 2018 工 作 界面 中 ， 选 取 要 修改 文字 属性 的 文字 图 层 ， 不 仅 可 
家 >>， 以 通过 选择 “窗口 ” |“ 字符” 命令 弹出 “字符 ”面板 ， 还 可 通过 按 Cttl 十 T 组 合 键 


mi ET 


其 

字符 | 良 落 三 

开 18 点 “ 过 自动 : 

1T 100% I 100% 

Ei ne: 国 国 国 
|@ 激 活 | > 回 )r rr mr 到 工时 
fiedt AaTltw, 

, 美国 英语 ~ aa 锐利 | 
图 12-75 ”输入 文本 图 12-76 设置 各 选项 图 12-77 输入 文本 


e STEP 09 选取 工具 箱 中 的 矩形 工具 ， 在 属性 栏 中 设置 “填充 ”为 土 黄色 ( RGB 参 数 为 201、151、 
15 ) 、“ 描 边 ” 为 无 ， 在 图 像 编辑 窗口 中 绘制 一 个 矩形 ， 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 


图 像 大 小 及 位 置 ， 效 果 如 图 12-78 所 示 。 
e STEP 10 复制 “和 矩形 1” 图 层 ， 得 到 “和 拢 形 1 拷贝 ”图 层 ， 用 移动 工具 适当 调整 图 像 位 置 ， 效 果 如 图 


12-79 所 示 。 至 此 ， 颁 奖 典 礼 邀 请 函 的 HS 页 面 设 计 完 成 。 


SS 


司 :1 


TITATION pe 
图 12-78 ”绘制 天 形 图 12-79 ” 拖 旭 拷贝 图 像 


请 束 殴 卡 是 人 们 在 喜庆 的 日 子 或 者 举办 喜庆 的 活动 时 ， 通 过 卡片 形式 的 
方式 进行 交流 ， 但 随 着 互联 网 的 发 展 ， 纸 质 请 束 痪 卡 已 逐渐 被 电子 请 束 贺 证 
所 取代 。 本 章 主 要 介绍 常见 贺卡 H5 广 告 设计 的 方法 。 


结婚 请 帖 ， 掌 握 婚礼 请 束 的 H5 页 面 设计 
新 春 贺 卡 ， 掌 握 新 年 祝福 的 H5 页 面 设计 
爱情 卡片 ;掌握 情 侣 表白 的 H5 页 面 设 计 


我 们 结婚 啦 | 人 @ a 


饭 龙 念 媒 给 您 绊 寺 中 


2019 HAPPY NEW YEAR 
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EE 正 到 中 结婚 请 帖 : 掌握 婚礼 请 束 的 H5 页 面 设计 


婚礼 请 束 是 新 人 在 举办 婚礼 时 邀请 双方 的 杀 朋 好 友 来 参加 婚礼 时 所 友 出 的 一 种 邀请 方式 ， 是 即将 
结婚 的 新 人 所 印 制 的 邀请 函 ， 但 随 着 时 代 的 进步 ， 以 及 亲朋 好 友 们 可 能 都 不 在 同一 个 城市 ， 隐 着 很 远 
的 距离 ， 纸 质 印 制 的 邀请 函 已 不 如 互联 网 方便 快捷 ， 这 便 是 婚礼 请 束 H5 页 面 设计 存在 的 理由 。 

本 实例 的 最 终 效果 如 图 13-1 所 示 。 
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图 13-1 实例 效果 


13.1.1 设计 婚礼 傅 束 主题 有 月 景 效果 


婚礼 请 束 运 用 适当 的 背景 色彩 及 元 素 的 搭配 ， 既 可 以 突出 爱情 的 主题 ， 又 能 够 彰 
显 婚礼 的 特色 。 下 面 详 细 介绍 设计 婚礼 请 束 主题 背景 效果 的 方法 。 其 操作 步骤 如 下 。 

9 STEP 01 选择 “文件 ” |“ 新建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@@ 设 置 “名 称 ” 
为 “掌握 婚礼 请 柬 H5 页 面 设 计 ”、 “宽度 ”为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 
素 / 英 寸 、“ 颜 色 模 式 ” 为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “和 白色”， 如 图 13-2 所 示 ; 全 单 击 “ 创 建 ” 
按钮 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “ 花 办 背景 jpg” 素 材 图 像 ， 在 “图 层 ” 面 板 中 ， 单 击 “ 背 景 ” 图 层 
右 侧 的 “指示 图 层 部 分 锁定 ”按钮 ， 如 图 13-3 所 示 ， 将 图 层 解 锁 。 

9 STEP 03 用 移动 工具 将 解锁 后 的 图 层 所 对 应 的 图 像 拖 蝶 至 背景 图 像 编辑 窗口 中 ， 并 将 图 层 命名 为 “ 花 
办 背景 ”， 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 果 
如 图 13-4 所 示 。 

9 STEP 04 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 在 渐变 条 上 设置 粉色 到 白色 的 渐变 


,贺卡 卡片 的 H5 广 告 设计 


( RGB 参 数值 分 别 为 252、119、213: 255、255、255 ) ， 并 单 击 “新 建 ” 按 钮 ， 新 建 渐变 预 设 ， 如 
图 13-5 所 示 。 


最 近 使 用 项 。 ”已 保存 照片 打印。 图 梧 和 括 图 Web 移动 设备 。 胶片 和 视频 
© 


图 13-2 设置 各 选项 
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图 13-3 ”解锁 图 层 图 13-4 ” 拖 搜 调整 图 像 图 13-5 ”新建 渐变 预 设 


9 STEP 05 在 “图 层 ” 面 板 中 ， 单 击 面板 下 方 的 “创建 新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 选 取 
工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 选 择 新 建 的 粉色 到 白色 的 渐变 预 设 ， 并 单 击 “ 渐 
变 编辑 器 ” 右 侧 的 “ 径 向 渐变 ”， 在 图 像 编辑 窗口 中 由 左上 方 至 右 下 方 拖 折 鼠标 ， 为 图 层 填充 渐变 ， 
效果 如 图 13-6 所 示 。 

9 STEP 06 在 “图 层 ” 面 板 中 ， 选 中 “图 层 1” 图 层 ， 设 置 图 层 “ 不 透明 度 ” 为 49%， 效 果 如 图 13-7 
所 示 。 

9 STEP 07 按 Ctrl 十 O 组 合 键 ， 打 开 “ 新 人 模特 psd” 素材 图 像 ， 用 移动 工具 将 素材 图 像 拖 电 至 图 像 编辑 
窗口 中 ， 并 将 图 层 命名 为 “新 人 模特 ”， 效 果 如 图 13-8 所 示 。 

9 STEP 08 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 果 
如 图 13-9 所 示 。 
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填充 
图 13-6 ”填充 径 向 渐变 图 13-7 ”设置 不 透明 度 图 13-8 拖 旭 图 像 图 13-9 ”调整 图 像 


13.1.2 ”这 计 婚礼 请 束 文 本 起 形 效 果 


根据 婚礼 请 束 主题 背景 的 粉色 色彩 ， 在 设计 婚礼 请 束 文本 矩形 时 ， 运 用 蓝 色色 彩 为 “了 i 屿 国 慰 
矩形 进行 填充 ， 能 够 让 整个 页 面 烘托 出 婚礼 的 幸福 感 。 下 面 详细 介绍 设计 婚礼 请 束 文本 “ 国 印 王 汪 寻 
定形 效果 的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 
9 STEP 01 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
无 、“ 描 边 ”为 蓝 色 ( RGB 参 数值 分 别 为 0、160、233 ) 、“ 描 边 宽度 ”为 3 点 ， 在 图 像 编辑 窗口 中 的 
适当 位 置 绘 制 一 个 和 矩形， 得 到 “和 矩形 1” 图 层 ， 效 果 如 图 13-10 所 示 。 

9 STEP 02 在 矩形 工具 属性 栏 中 继续 设置 “填充 ”为 蓝 色 ( RGB 参数 值 分 别 为 0(、166、233 ) 、“ 描 
边 ”为 无 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘 制 一 个 矩形 ， 得 到 “ 甜 形 2” 图 层 ， 效 果 如 图 13-11 所 示 。 
9 STEP 03 在 “图 层 ” 面板 中 ， 按 住 Shift 键 的 同时 ， 选 中 “ 算 形 1” 和 “和 矩形 2” 两 个 图 层 ， 在 工具 属 
性 栏 中 分 别 单 击 “ 水 平 居 中 对 齐 ” 和 “垂直 居中 对 齐 ” 按 钮 ， 将 两 个 矩形 垂直 水 平 居中 ， 效 果 如 图 

13-12 所 示 。 

9 STEP 04 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 Modern No.20、“ 字 体 大 小 ”为 60 点 、“ 行 距 ” 为 “自动 ”、 设 置 所 选 字符 的 字 距 
调整 为 100、 “颜色 ” Es 0、0 ) ， 如 图 13-13 所 示 。 
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图 13-10 ”绘制 矩形 图 13-11 绘制 矩形 图 13-12 ”调整 图 像 图 13-13 ”设置 字符 选项 
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ep | 在 Photoshop CC 2018 工 作 界面 中 ， 居 中 操作 可 以 通过 两 种 方式 来 完成 : : 
“过 王 指 所 ， > 使 用 移动 工具 选中 需要 居中 的 两 个 图 层 ， 在 工具 属性 栏 中 单 击 “ 水 平 居中 ”按钮 
: "或 “垂直 居中 ”按钮 * ， 即 可 对 图 层 对 象 进行 水 平 或 垂直 居中 操作 。 : 
”> 选中 两 个 图 层 ， 选 择 “ 图 层 ”|“ 对 齐 ”|“ 水 平 居中 ”命令 ， 也 可 以 水 平 居中 对 象 。 


snes 


9 STEP 05 输入 相应 的 文本 ， 并 调整 至 适当 位 置 ， 效 果 如 图 13-14 所 示 。 

9 STEP 06 在 “图 层 ” 面 板 中 ， 双 击 2019 文 字 图 层 的 空白 处 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 ，@ 选 中 
“ 描 边 ” 复 选 框 ;全 设置 “大 小 ”为 3 像素 、“ 位 置 ”为 “外 部 ”、“ 混 合 模式 ”为 “正常 ”、“ 不 
透明 度 ” 为 100%、“ 填 充 类 型 ”为 “颜色 ”、 “颜色 ”为 黄色 ( RGB 参 数值 分 别 为 255、255、0 ) ， 
如 图 13-15 所 示 。 


图 13-14 输入 文本 图 13-15 设置 图 层 样 式 
9 STEP 07 单 击 “ 确 定 ”按钮 为 图 层 添加 描 边 ， 效 果 如 图 13-16 所 示 。 
eo STEP 08 在 “图 层 `” 面板 中 ， 双 击 2019 文 字 图 层 右 侧 的 “指示 图 层 效果 ”按钮 关 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 ， 引 选中 “投影 ” 复 选 框 ; 四 设置 “混合 模式 ”为 “正片 亚 底 ”、“ 阴 影 颜色 ”为 黑色 
( RGB 参数 值 均 为 0 ) 、“ 不 透明 度 ” 为 539%、“ 和 角度 ”为 158 度 、“ 距 离 ” 为 9 像素 、“ 扩 展 ” 为 0、 
“大 小 ”为 0 像素 、“ 杂 色 ” 为 0， 如 图 13-17 所 示 。 
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图 13-16 添加 描 边 图 13-17 设置 图 层 样 式 
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9 STEP 10 选取 工具 箱 中 的 和 窍 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 - 
为 “形状 ”、 “填充 ”为 蓝 色 ( RGB 参数 值 分 别 为 0"(、160、233 ) 、“ 描 边 ” 注 


时 局 我 。 
为 无 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘制 一 个 矩形 ， 得 到 “矩形 3” 图 层 , 效 站 二 
果 如 图 13-19 所 示 。 Ck 
9 STEP 11 按 Ctrl 十 T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 , 并 
按 Enter 键 确认 变换 ， 效 果 如 图 13-20 所 示 。 
9 STEP 12 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”| “字符 ”命令 ， 在 弹 ， 


9 STEP 09 单 击 “确定 ”按钮 为 图 层 添 加 投影 ， 效 果 如 图 13-18 所 示 。 -和 
7 


出 的 “字符 ”面板 中 设置 “字体 系列 ”为 “长 城 行 楷体 ”、“ 字 体 大 小 ”为 
15 点 、“ 行 距 `" 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 


白色 ( RGB 参数 值 均 为 235 ) ， 如 图 13-21 所 示 。 图 13-18 “添加 投影 
ES = [ 4 x 
字符 。 段落 圭 
;长城 行 棋 体 ~ - | v | 
并 14 点 v1 人 自动 | > 
VA Do v 0 
疯 0% ~ 


图 13-19 绘制 短 形 图 13-20 调整 图 像 图 13-21 设置 字符 各 选项 

9 STEP 13 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 13-22 所 示 。 

9 STEP 14 在 “图 层 ” 面板 中 ， 双 击 “ 携 手 幸 福 ” 文 字 图 层 的 空 和 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 
中 ，@ 选 中 “外 发 光 ” 复 选 框 ; 四 设置 “混合 模式 ”为 “正常 ”、“ 不 透明 度 ” 为 100%、“ 杂 色 ” 为 
0、“ 发 光 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) 、“ 方 法 ”为 “柔和 ”、 “扩展 ”为 4%6、“ 大 小 ”为 
250 像 素 、“ 范 围 ” 为 50%、“ 拌 动 ” 为 0， 如 图 13-23 所 示 。 


We 


@& Pre 
! 第 1 > 
一 温 选 ] 1 2 可 E 本 1 
a “ 口 着 和 Wd | 
1 LU OO 1 I 加 本 
| 3 W)..， ) 
S ~ z ie 了 和 | 0: = 新 建 翌 式 (W) 
| | 司 全 了 三 监 (V) 


图 13-22 输入 文本 图 13-23 ”设置 图 层 样式 
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@eSTEP 15 单 击 “确定 ”按钮 ， 为 文字 图 层 添 加 外 发 光 ， 效 果 如 图 13-24 所 示 。 
eSTEP 16 选取 工具 箱 中 的 横 排 文字 工具 ， 和 选择“ 窗口 ” |“ 字符 ”命令 ， 在 弹出 的 “字符 ”面板 中 设置 


“字体 系列 ”为 “黑体 ”、 


“字体 大 小 ”为 14 所 、 


“行距 ”为 “自动 ”、 设 置 所 选 字符 的 字 距 调整 为 


0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 13-25 所 示 。 
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图 13-24 添加 外 发 光 
e STEP 17 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 13-26 所 示 。 
eo STEP 18 在 “字符 ”面板 中 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 6 点 、“ 行 距 ” 为 “ 自 


动 ”、 设 置 所 选 字符 的 字 距 调整 为 0、 
e STEP 19 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 13-28 所 示 。 
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图 13-26 输入 文本 
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图 13-27 设置 字符 各 选项 图 13-28 ”输入 文本 


13.1.3 ”设计 婚礼 请 束 角 饰 效果 


婚礼 请 束 通 营 印 有 邀请 图 三 个 字 ， 在 告诉 受 邀 者 是 婚礼 的 同时 ， 也 是 邀请 对 方 来 
参加 婚礼 。 下 面 详细 介绍 设计 婚礼 请 束 装 饰 效 果 的 方法 。 其 操作 步骤 如 下 。 
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图 13-25 设置 字符 各 选项 


“颜色 ”为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 13-27 所 示 。 
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9 STEP 01 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “ 形 扫 码 看 视频 

状 ”、“ 填 充 ” 为 红色 ( RGB 参 数值 分 别 为 255、0、0 ) 、“ 描 边 ” 为 无 ， 在 图 像 编 辑 窗口 中 的 适当 
位 置 绘制 一 个 和 矩形， 得 到 “矩形 4” 图 层 ， 效 果 如 图 13-29 所 示 。 


I 


Photoshop 
H5 广 告 设计 


9 STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “ 花 办 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 图 像 编辑 窗 口 
中 的 适当 位 置 ， 并 将 图 层 命名 为 “花瓣 ”， 效 果 如 图 13-30 所 示 。 

9 STEP 03 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 皂 “ 花 办 ” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 复 制 
得 到 “花瓣 找 贝 ”图 层 ， 效 果 如 图 13-31 所 示 。 
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图 13-29 ”绘制 矩形 图 13-30 拖 旭 图 像 图 13-31 复制 拖 疫 图 像 
9 STEP 04 选择 “编辑 ” |“ 变换”|“ 垂 直 翻 转 ” 人 命令， 将“ 花 办 拷贝 ”图 层 所 对 应 的 图 像 进 行 垂直 翻 
转 ， 效 果 如 图 13-32 所 示 。 
9 STEP 05 在 “图 层 ` 面板 中 ， 按 住 Shif 键 的 同时 ， 选 中 “ 花 准 ” 和 “花瓣 拷贝 ”两 个 图 层 ， 将 选中 的 
图 层 拖 蝶 至 “ 窍 形 4 图 层 下 方 ， 如 图 13-33 所 示 。 
9 STEP 06 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 人 命令， 弹出 “字符 ”面板 ， 设 置 “ 字 


体系 列 ” 为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 48 点 、“ 行 距 ” 为 “自动 ” 、“ 设 置 所 选 字符 的 字 距 
调整 ”为 0、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 13-34 所 示 。 
5 图 | 通道 | 踏 在 三 [ 到 二 于 
Pa -加 OoT8ED e 字符 。 厦 落 三 
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旋 E: 图 y 中 寺 自 二 况 :100% 方正 综艺 简体 | 
° WE PT 和 8 点 “ 过 自动 
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©e STEP 07 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 13-35 所 示 。 

9 STEP 08 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 综艺 简体 ”、“ 字 体 大 小 ”为 24 点 、“ 行 
距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 0(、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 2355 ) ， 如 
图 13-36 所 示 。 
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9 STEP 09 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 13-37 所 示 。 至 此 ， 完 成 婚礼 请 束 H5 页 面 


设计 。 
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9 新春 贺 卡 : 掌握 新 年 祝福 的 H5 页 面 设计 


中 国 农 历 新 年 到 来 之 际 ， 各 家 各 户 都 会 同 自 己 的 亲朋 好 友 表 达 美 好 的 祝福 及 关切 之 意 。 每 到 新 年 
之 际 大 家 都 会 通过 各 种 方式 相互 祝福 ， 而 发 送 贺 卡 则 是 最 常用 的 方式 。 
本 实例 的 最 终 效 果 如 图 13-38 所 示 。 


图 13-38 ”实例 效果 


素材 文件 素材 \ 第 13 章 \ 红 鳞 纹 理 .psd、 锦 旗 .psd、 猪 .psd、 松 柏 .psd、 飘 云 1.psd、 飘 云 2.psd、 
飞龙 标志 .psd、 花 纹 .psd 


效果 文件 | 效果 \ 第 13 章 \ 掌 握 新 年 祝福 H5 页 面 设计 .psd、 掌 握 新 年 祝福 H5 页 面 设计 .jpg 
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13.2.1 设计 新 年 祝福 育 景 纹理 效果 


在 新 年 祝福 页 面 背景 的 设计 上 ， 可 以 融入 新 春色 彩 元 素 ， 以 突出 主题 。 下 面 详细 和 
介绍 设计 新 年 祝福 背景 纹理 效果 的 方法 。 其 操作 步骤 如 下 。 口 世 :中 5 
9 STEP 01 选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 扫 码 看 视频 
为 “掌握 新 春 祝福 H5 页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 
像素 /英寸 、“ 颜 色 模 式 ” 为 “RGB 颜 色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 13-39 所 示 ; 人 @ 单 击 “ 创 
建 ” 按 钮 ， 新 建 一 个 空白 图 像 。 
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图 13-39 ”设置 各 选项 
© STEP 02 设置 前 景色 为 深 红色 ( RGB 参 数值 分 别 为 175、9、21 ) ， 在 “图 层 ” 面 板 下 方 单 击 “ 创 建新 
图 层 ” 按 钮 ， 创 建 一 个 “图 层 1” 图 层 ， 为 图 层 填 充 前 景色 ,效果 如 图 13-40 所 示 。 
9 STEP 03 在 “图 层 ” 面 板 中 ， 选 中 “图 层 1” 图 层 ， 设置“ 不 透明 度 ” 为 65%， 效 果 如 图 13-41 所 示 。 
9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 红 鳞 纹 理 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 
编辑 窗口 中 适当 位 置 ， 将 图 层 命名 为 “ 红 钱 纹理 ”， 效 果 如 图 13-42 所 示 。 
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图 13-40 填充 前 景色 图 13-41 调整 不 透明 度 图 13-42 ” 拖 瘟 图像 
9 STEP 05 在 图 像 编辑 窗口 中 ， 按 住 Alt 十 Shift 组 合 键 的 同时 ， 水 平抑 忠 “ 红 鳞 纹理 ”图 层 所 对 应 的 图 像 
至 合适 位 置 ， 复 制 得 到 “ 红 鳞 纹理 拷贝 ”图 层 ， 效 果 如 图 13-43 所 示 。 
© STEP 06 在 图 像 编 辑 窗口 中 ， 按 住 Shift 键 的 同时 ， 选 中 “ 红 鳞 纹理 ”和 “ 红 鳞 纹理 拷贝 ”两 个 图 层 所 
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对 应 的 图 像 ， 按 住 Alt 十 Shift 组 合 键 的 同时 ， 垂 直 拖 中 图像 至 合适 位 置 ， 复 制 得 到 “ 红 鳞 纹理 拷贝 2 
和 “ 红 鲜 纹理 拷贝 2” 两 个 图 层 ， 效 果 如 图 13-44 所 示 。 

9 STEP 07 重复 以 上 步骤 ， 拖 遇 复 制图 像 至 合适 位 置 ， 得 到 “ 红 鳞 纹理 拷贝 3”、“ 红 鳞 纹 理 拷贝 
3”、“ 红 鳞 纹 理 找 贝 4”、“ 红 鳞 纹 理 拷贝 4”4 个 图 层 ， 效 果 如 图 13-45 所 示 。 
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图 13-43 ” 拖 虽 复制 图 像 图 13-44 拖 旨 复制 图 像 图 13-45 拖 息 复制 图 像 
9 STEP 08 在 “图 层 ” 面 板 中 ， 单 击 面板 下 方 的 “创建 新 图 层 ” 按 钮 ， 创 建 一 个 “图 层 2” 图 层 ， 为 图 
层 填充 前 景色 深 红色 ( RGB 参 数值 分 别 为 175、9、21 ) ， 效 果 如 图 13-46 所 示 。 
9 STEP 09 在 “图 层 ” 面 板 中 ， 选 中 “图 层 2” 图 层 ， 设置“ 不 透明 度 ” 为 76%， 效 果 如 图 13-47 所 示 。 
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图 13-46 ”填充 前 景色 图 13-47 ”调整 不 透明 度 


13.2.2 设计 新 年 祝福 文子 信息 效果 


(公司 或 企业 ) 。 pet We 各 rh 
e STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 锦 旗 .psd” 素 材 图 像 ， 用 移动 工具 拖 中 图像 至 背景 扫 码 看 视频 
图 像 编辑 窗口 中 的 合适 位 置 ， 并 将 图 层 命 名 为 “锦旗 ”， 效 果 如 图 13-48 所 示 。 
e@e STEP 02 按 Ctrl 十 IT 组合 键 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 果 


如 图 13-49 所 示 。 
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图 13-48 拖 虽 图 像 图 13-49 ”调整 图 像 
e STEP 03 选取 工具 箱 中 的 直 排 文字 工具 ， 和 加 选择 “窗口 ” |“ 字符” 命令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
置 “字体 系列 ”为 “ 叶 根 友 毛 笔 行书 2.0 版 ”、“ 字 体 大 小 ”为 72 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字 


符 的 字 距 调整 ”为 200、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ; 四 并 激活 仿 粗 体 图 标 ， 如 图 13-50 所 示 。 
9 STEP 04 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 13-51 所 示 。 
9 STEP 05 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ，@ 在 渐变 条 上 设置 金色 、 浅 黄 、 
金色 、 暗 黄 的 渐变 ( RGB 参 数值 分 别 为 236、198、43; 247、240、181; 236、198、43; 153、81、 
35 ) ; 四 并 单 击 “新 建 ” 按 钮 ， 新 建 渐变 预 设 ， 如 图 13-$2 所 示 。 
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图 13-50 ”设置 字符 选项 图 13-51 输入 文本 图 13-52 ”新 建 渐变 预 设 

9 STEP 06 在 “图 层 ” 面 板 中 ， 双 击 “ 北 猪 年 ”文字 图 层 空白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ，@ 选 
中 “渐变 到 加 ” 复 选 框 ; 四 设置 “混合 模式 ”为 “正常 ”、“ 不 透明 度 ” 为 100%、“ 渐 变 ” 为 新 建 的 
渐变 色 ( 金色 、 浅 黄 、 金 色 、 暗 黄 ) 、“ 和 角度 ”为 -16 度 、“ 缩 放 ” 为 150%， 如 图 13-53 所 示 。 

9 STEP 07 单 击 “确定 ”按钮 ， 为 文字 图 层 添加 渐变 二 加 ， 效 果 如 图 13-54 所 示 。 

9 STEP 08 在 “图 层 ” 面板 中 ， 双 击 “ 玄 猪 年 ”文字 图 层 右 侧 的 “指示 图 层 效 果 ” 按 钮 和 ， 在 弹出 的 
“图 层 样 式 ”对 话 框 中 ，@ 选 中 “投影 ” 复 选 框 ， 全 设置 “混合 模式 ”为 “正常 ”、“ 阴 影 颜色 ”为 
黑色 ( RGB 参数 值 均 为 0 ) 、“ 不 透明 度 ” 为 61%、“ 和 角度 ”为 90 度 、“ 距 离 ” 为 18 像 素 、“ 扩 展 ” 为 
24%、“ 大 小 ”为 32 像 素 、“ 杂 色 ” 为 0， 如 图 13-55 所 示 。 

9 STEP 09 单 击 “ 确 定 ” 按 钮 为 文字 图 层 添加 投影 ， 效 果 如 图 13-56 所 示 。 
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图 13-54 添加 渐变 登 加 
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图 13-55 设置 图 层 样式 图 13-56 ”添加 投影 
9 STEP 10 选取 工具 箱 中 的 横 排 文 字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 置 
“字体 系列 ”为 Viner Hand ITC、“ 字 体 大 小 ”为 70 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 的 字 距 调 
整 ”为 0、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 255、0、0 ) ， 并 激活 仿 粗 体 图 标 ， 如 图 13-57 所 示 。 
9 STEP 11 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 13-58 所 示 。 
9 STEP 12 用 与 上 同样 的 方法 ， 在 图 像 编 辑 窗 口中 输入 相应 文本 ， 并 调整 文本 的 字体 大 小 ， 效 果 如 
图 13-59 所 示 。 


图 13-59 输入 文本 


图 13-57 设置 字符 选项 
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9 STEP 13 在 “图 层 ” 面 板 中 ， 按 住 Shift 键 的 同时 ， 选 中 “2” “01” “9” 三 个 文字 图 层 ， 并 单 击 面板 
下 方 的 “创建 新 组 ”按钮 ， 将 “2” “01” “9” 三 个 文字 图 层 编组 ， 得 到 “组 1”， 如 图 13-60 
所 示 。 

9 STEP 14 双击 “组 1” 图 层 组 空白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ， 人 @ 选 中 “投影 ” 复 选 
框 ， 人 设置 “混合 模式 ”为 “正常 ”、“ 阴 影 颜色 ”为 黑色 ( RGB 参数 值 均 为 0 ) 、“ 不 透明 度 ” 为 
100%、“ 和 角度 ”为 90 度 、“ 距 离 ” 为 9 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 20 像 素 、“ 杂 色 ” 为 0， 
如 图 13-61 所 示 。 
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图 13-60 图 层 编组 图 13-61 设置 图 层 样 式 
9 STEP 15 单 击 “确定 ”按钮 为 图 层 组 添加 投影 ， 效 果 如 图 13-62 所 示 。 
9 STEP 16 在 “图 层 ” 面 板 中 ， 拖 忠 “ 组 1” 图 层 组 至 面板 下 方 的 “创建 新 组 ”按钮 上 ， 得 到 “组 2” 
图 层 组 ， 如 图 13-63 所 示 。 
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图 13-62 添加 投影 图 13-63 ”创建 新 组 


9 STEP 17 双击 “组 2” 图 层 组 空白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ， 和 选中 “内 发 光 ” 复 选 
框 ; 四 设置 “混合 模式 ”为 “正常 ”、“ 不 透明 度 ” 为 23%、“ 杂 色 ” 为 100%、“ 发 光 颜 色 ” 为 白 
色 ( RGB 参数 值 均 为 235 ) 、“ 方 法 ”为 “柔和 ”、“ 阻 塞 ”为 0、“ 大 小 ”为 16 像 素 、“ 范 围 ” 为 
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50%、“ 皖 动 ” 为 0， 并 选中 “ 源 ” 右 侧 的 “居中 ” 单 选 按 钮 ， 如 图 13-64 所 示 。 
e STEP 18 单 击 “ 确 定 ” 按 钮 为 图 层 组 添加 内 发 光 ， 效 果 如 图 13-65 所 示 。 
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图 13-64 设置 图 层 样 式 图 13-65 ”添加 内 发 光 
© STEP 19 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”| “字符 ”命令 ， 在 弹出 的 “字符 ”面板 中 ， 
各 设置 “字体 系列 ”为 “方正 综艺 简体 ”、 “字体 大 小 ”为 12 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 


字符 的 字 距 调整 ”为 200、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 235 ) ;四 并 激活 仿 粗 体 图 标 ， 及 工具 属 
性 栏 中 的 “ 左 对 齐 文本 ”按钮 转 ， 如 图 13-66 所 示 。 
9 STEP 20 输入 相应 文本 并 调整 至 合适 位 置 ， 按 Enter 键 调整 文本 至 如 图 13-67 所 示 的 效果 。 
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图 13-66 设置 字符 选项 z 图 13-67 输入 调整 文本 
9 STEP 21 在 “图 层 ” 面 板 中 ， 双 击 2019 HAPPY NEW YEAR 文 字 图 层 空白 处 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 ， 选 中 “渐变 ” 芭 加 复 选 框 ， 设 置 “ 混 合 模式 ”为 “正常 ”、“ 不 透明 度 ” 为 100%、“ 渐 
变 ” 为 新 建 的 渐变 色 ( 金色 、 浅 黄 、 金 色 、 暗 黄 ) 、“ 样 式 ” 为 “线性 ”、“ 角 度 ” 为 0 度 、“ 缩 
放 ” 为 150%， 如 图 13-68 所 示 。 
9 STEP 22 单 击 “确定 ”按钮 为 文字 图 层 添 加 源 变 二 加 ， 效 果 如 图 13-69 所 示 。 
9 STEP 23 按 Ctrl 十 O 组 合 键 ， 打 开 “ 飞 龙 标志 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 
编辑 窗口 中 ， 并 将 图 层 命 名 为 “飞龙 标志 ”， 效 果 如 图 13-70 所 示 。 
9 STEP 24 按 Ctrl 十 IT 组合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 果 


如 图 13-71 所 示 。 
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图 13-68 设置 图 层 样 式 图 13-69 ”添加 渐变 登 加 


图 13-70 拖 旨 图 像 图 13-71 调整 图 像 
9 STEP 25 在 “图 层 ” 面 板 中 ， 双 击 “ 飞 龙 标 志 ” 图 层 空白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ， 选 中 
“渐变 二 加 ” 复 选 框 ， 设 置 “ 混 合 模 式 ” 为 “正常 ”、“ 不 透明 度 ” 为 100%、“ 渐 变 ” 为 新 建 的 渐变 
色 ( 金色 、 浅 黄 、 金 色 、 暗 黄 ) 、“ 样 式 ” 为 “线性 ”、“ 和 角度 ”为 0 度 、“ 缩 放 ” 为 150%， 如 
图 13-72 所 示 。 
9 STEP 26 单 击 “ 确 定 ” 按 钮 为 图 层 添加 淘 变 芭 加 ， 效 果 如 图 13-73 所 示 。 


不 光明 芭 (PD); 一 一 100 % 1 新建 标 式 (W)..， ) 


a el i 


样式 :| 绕 往 ~ 回 与 司 司 对 草包 
负 认 (N》 (I 记 ”二 对 齐 


红 N(S: 一 50 % 1 用 
ye 


图 13-72 设置 图 层 样 式 图 13-73 ”添加 渐变 登 加 


9 STEP 27 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 合 令 ， 在 弹出 的 “字符 ”面板 中 ， 
@O 设 置 “ 字 体系 列 ” 为 “ 叶 根 友 毛 笔 行书 2.0 版 ”、“ 字 体 大 小 ”为 12 点 、“ 行 距 ” 为 17.45 点 、“ 设 
“颜色 ”为 白色 ( RGB 参 数值 均 为 255 ) ; 四 并 激活 仿 粗 体 图 标 ， 及 


置 所 选 字符 的 字 距 调整 ”为 200、 
单 击 工具 属性 栏 中 的 “居中 对 齐 文本 ”按钮 图 ， 如 图 13-74 所 示 。 


© STEP 28 A a 效果 如 图 13-75 所 示 。 
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图 13-74 设置 字符 选项 z 图 13-75 输入 文本 
9 STEP 29 在 “图 层 ” 面 板 中 ， 双 击 “ 飞 龙 传媒 有 限 公司 ” 文 字 图 层 空白 处 ， 在 弹出 的 “图 层 样式 ”对 
“混合 模式 ”为 “正常 ”、“ 不 透明 度 ” 为 100%、“ 渐 变 " 
“样式 ” 为“ 线性”、“ 角 度 ”为 0 度 、“ 缩 放 ” 为 


话 框 中 ， 选 中 “渐变 全 加 ” 复 选 框 ， 设 置 
为 新 建 的 渐变 色 ( 金色 、 浅 黄 、 金 色 、 有 上 暗 黄 ) 、 


150%， 如 图 13-76 所 示 。 
e STEP 30 单 击 “确定 ”按钮 为 文字 图 层 添加 渐变 苔 加 ， 效 果 如 图 13-77 所 示 。 
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图 13-77 添加 渐变 登 加 
， 效 果 


图 13-76 设置 图 层 样式 
9 STEP 31 用 与 上 同样 的 方法 ， 在 图 像 编辑 窗口 中 输入 相应 文本 ， 并 调整 文本 的 字体 系列 和 大 小 


如 图 13-78 所 示 。 
9 STEP 32 在 图 像 编 辑 窗 口中 ， 按 住 Alt 键 的 同时 ， 拖 曙 图 像 左上 角 的 文本 至 合适 位 置 ， 如 图 13-79 


所 示 。 
9 STEP 33 选取 工具 箱 中 的 横 排 文字 工具 ， 单 击 图 像 右 下 角 复 制 得 到 的 文本 ， 更 改 文 本 的 内 容 ， 并 激活 
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工具 属性 栏 中 的 “ 右 对 齐 文 本 ”按钮 图 ， 调 整 文本 至 适当 位 置 ， 效 果 如 图 13-80 所 示 。 


图 13-78 输入 文本 图 13-79 拖 旨 复制 文本 图 13-80 ”更改 文本 


13.2.3 ”设计 新 年 侣 唱 新 春 元 素 效 果 


新 年 祝福 页 面 的 设计 ， 不 仅 需要 注意 突出 文本 内 容 ， 同 时 适当 添加 一 些 新 春 元 素 外史 哇 
会 使 整个 页 面 更 加 贴近 新 年 红火 热闹 的 气息 。 下 面 详细 介绍 设计 新 年 祝福 新 春 元 素 效 ”加 串 早 尖 哇 
果 的 方法 。 其 操作 步骤 如 下 。 扫 码 看 视频 
9 STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 飘 云 1.psd” 素 材 图 像 ， 用 移动 工具 拖 电 图 像 至 背景 图 像 编 辑 窗 口 
中 的 适当 位 置 ， 并 将 图 层 命名 为 “ 标 云 1”， 效 果 如 图 13-81 所 示 。 
e STEP 02 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 并 按 Enter 键 确认 变换 ， 效 果 
如 图 13-82 所 示 。 


图 13-81 拖 旭 图 像 图 13-82 ”调整 图 像 
9 STEP 03 在 “图 层 ” 面 板 中 ， 双 击 “ 标 云 1” 图 层 空 白 处 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ， 选 中 
“渐变 二 加 ” 复 选 框 ， 设 置 “ 混 合 模式 ”为 “正常 ”、“ 不 透明 度 ” 为 100%、“ 渐 变 ” 为 新 建 的 渐变 
色 ( 金色、 浅黄、 金色、 上 暗 黄 ) 、“ 样 式 ” 为 线性 、“ 和 角度” 为 0 度 、“ 缩 放 ” 为 150%， 如 图 13-83 
所 示 。 
9 STEP 04 单 击 “确定 ”按钮 为 图 层 添加 淘 变 二 加 ， 效 果 如 图 13-84 所 示 。 
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图 13-83 ”设置 图 层 样 式 图 13-84 ”添加 渐变 合 加 
e STEP 05 在 “图 层 ” 面 板 中 ， 双 击 “ 标 云 1” 图 层 右 侧 的 “指示 图 层 效果 ”按钮 和 ， 在 弹出 的 “图 
层 样式 ”对 话 框 中 ，@ 选 中 “投影 ” 复 选 框 ， 人 设置 “混合 模式 ”为 “正常 ”、“ 阴 影 颜色 ”为 黑 
色 ( RGB 参 数值 均 为 0) 、“ 不 透明 度 ” 为 61%、“ 和 角度 ”为 90 度 、“ 距 离 ” 为 11 像 素 、“ 扩 展 ” 为 
16%、“ 大 小 ”为 8 像素 、“ 杂 色 ” 为 0%; 合并 选中 “ 反 向 ” 复 选 框 ， 如 图 13-85 所 示 。 
9 STEP 06 单 击 “ 确 定 ”按钮 为 图 层 添 加 投影 ， 效 果 如 图 13-86 所 示 。 
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图 13-85 设置 图 层 样式 图 13-86 “添加 投影 

9 STEP 07 按 Ctrl 十 O 组 合 键 ， 打 开 “ 飘 云 2” 素 材 图 像 ， 用 移动 工具 拖 中 图像 至 背景 图 像 编 辑 窗口 中 的 
适当 位 置 ， 并 将 图 层 命名 为 “ 标 云 2”， 效 果 如 图 13-87 所 示 。 

9 STEP 08 按 Ctrl 十 IT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 位 置 及 大 小 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 13-88 所 示 。 

9 STEP 09 在 “图 层 ” 面 板 中 ， 用 女 标 右键 单 击 “ 飘 云 1” 图 层 ， 在 弹出 的 快捷 菜单 中 选择 “拷贝 图 层 
样式 ”命令 ， 并 用 鼠标 右键 单 击 “ 飘 云 2” 图 层 ， 在 弹出 的 快捷 菜单 中 选择 “粘贴 图 层 样式 ”命令 ， 
为 “ 飘 云 2” 图 层 添加 图 层 样式 ， 效 果 如 图 13-89 所 示 。 

9 STEP 10 在 图 像 编 辑 窗 口中 ， 按 住 Alt 键 的 同时 ， 拖 忠 “ 飘 云 2” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 得 到 

“ 标 云 2 拷贝 ”图 层 ， 效 果 如 图 13-90 所 示 。 

9 STEP 11 按 Ctrl 十 O 组 合 键 ， 打 开 “ 猪 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 窗 

口中 ， 将 图 层 命名 为 “ 猪 ”， 并 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 然 后 按 
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Enter 键 确认 变换 ， 效 果 如 图 13-91 所 示 。 

9 STEP 12 按 Ctrl 十 O 组 合 键 ， 打 开 “ 松 相 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 拒 至 背景 图 像 编 辑 
窗口 中 ， 将 图 层 命名 为 “松柏 ”， 并 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 然 
后 按 Enter 键 确认 变换 ， 效 果 如 图 13-92 所 示 。 
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图 13-90 拖 旭 复制 图 像 图 13-91 拖 旭 调整 图 像 图 13-92 ” 拖 旭 调整 图 像 

9 STEP 13 按 Ctrl 十 O 组 合 键 ， 打开“ 人 金 猪 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 
图 像 拖 蝶 至 背景 图 像 编 辑 窗 口中 ， 将 图 层 命 名 为 “ 金 猪 ” ， 并 按 Ctrl 十 IT 组 合 
键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 然 后 按 Enter 键 确认 变换 ， 
效果 如 图 13-93 所 示 。 

9 STEP 14 按 Ctrl 十 O 组 合 键 ， 打 开 “ 花 纹 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 
图 像 抱 蝶 至 背景 图 像 编辑 窗 口中 ， 将 图 层 命 名 为 “花纹 ”， 并 按 Ctrl 十 T 组 合 
键 调 出 变换 控制 框 ， 在 工具 属性 栏 中 设置 “旋转 ”为 90 度 ， 适 当 调 整 图 像 位 
置 ， 然 后 按 Enter 键 确认 变换 ， 效 果 如 图 13-94 所 示 。 


eSTEP 15 在 “图 层 ” 面 板 中 ， 双 击 “ 花 纹 ” 图 层 空 自 处 ， 在 弹出 的 “图 层 样 人 i 
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式 ” 对 话 杠 中， 选中 “渐变 全 加 ” 复 选 框 ， 设 置 “ 混 合 模式 ”为 “正常 ”、 全 从 生 才 1 01 让。 
“不 透明 度 ” 为 100%、“ 渐 变 ” 为 新 建 的 渐变 色 ( 金色 、 浅 黄 、 金 色 、 瞳 ”图 13.93 拖 员 调整 图 像 
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黄 ) 、“ 样 式 ” 为 “线性 ”、“ 和 角度 ”为 0 度 、“ 缩 放 ” 为 150%， 如 图 13-95 所 示 。 


在 Photoshop CC 2018 工 作 界 面 中 ， 旋 转 图 像 时 ， 可 以 选择 “图 像 ”|“ 图 像 旋 
(六 捐 点 ) 和 -入 44， 在 芋 由 的 列表 棋 中 入行 和 捧 ， 或 按 Cil4T 组 合 键 ， 调 出 二 失掉， 
“用 鼠标 右键 单 击 图 像 ， 在 弹出 的 快捷 菜单 中 进行 选择 ;或 将 鼠标 指针 移动 到 图 像 的 任意 一 个 角 ， 
:。 待 鼠标 指针 变 为 一 个 双 箭 头 时 ， 便 可 以 拖 动 图 像 旋 转 。 : 
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图 13-94 拖 息 旋转 图 像 图 13-95 ”设置 图 层 样式 
© STEP 16 单 击 “确定 ”按钮 为 图 层 添加 渐变 二 加 ， 效 果 如 图 13-96 所 示 。 
9 STEP 17 在 图 像 编辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 拒 “ 花 纹 ” 图 层 所 对 应 的 图 像 至 合适 位 置 ， 复 制 
得 到 “花纹 找 贝 ”图 层 ， 效 果 如 图 13-97 所 示 。 
9 STEP 18 选择 “编辑 ”|“ 变 换 ”|“ 水 平 翻转 ”命令 ,将 “花纹 拷贝 ”图 层 所 对 应 的 图 像 水 平 翻转 ， 
效果 如 图 13-98 所 示 。 至 此 ， 完 成 新 年 祝福 H5 页 面 设 计 。 


图 13-96 添加 渐变 登 加 图 13-97 ” 拖 慢 复制 图 像 图 13-98 水 干 翻转 图 像 
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爱情 卡片 : 掌握 情侣 表白 的 H5 页 面 设计 


青 侣 表白 是 情侣 间 向 对 方 表达 爱 意 、 闻 述 自 己 的 心意 及 想法 的 一 种 示爱 方式 。 表 白 的 方式 有 很 多 
种 ， 如 当面 表达 、 写 情书 、 打 电话 、 送 礼物 送 花 等 。 
本 实例 的 最 终 效 果 如 图 13-99 所 示 。 
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13.3.1 设计 情侣 表 日 痕 漫 背景 效果 


青 侣 表白 是 基于 爱情 萌芽 所 产生 的 ， 所 以 在 设计 背景 时 使 用 粉色 地 主 色 调 能 够 很 

好 地 营造 一 种 恋爱 氛围 。 下 面 详细 介绍 设计 情侣 表白 浪漫 背景 效果 的 方法 。 其 操作 步 
骤 如 下 。 扫 码 着 视频 

© STEP 01 选择 “文件 ” |“ 新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 和 全 设置 “名 称 ” 为 “掌握 情侣 表白 
H5 页 面 设计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辩 率 ”为 300 像 素 /英寸 、“ 颜 色 模 
式 ” 为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “和 白色”， 如 图 13-100 所 示 ; @ 单 击 “创建 ” 按 钮 ， 新 建 一 个 
空白 图 像 。 

9 STEP 02 按 Ctrl 十 O 组 合 键 ， 打 开 “ 浪 漫 背 景 .jpg” 素 材 图 像 ， 在 “图 层 ” 面 板 中 ， 单 击 “ 背 景 ” 图 层 
右 侧 的 “指示 图 层 部 分 锁定 ”按钮 ， 解 锁 背 景 图 层 ， 如 图 13-101 所 示 。 

9 STEP 03 在 图 像 编辑 窗口 中 ， 用 移动 工具 拖 蝶 解 锁 后 的 图 层 至 图 像 编 辑 窗 口中 ， 将 图 层 俞 名 为 “ 沪 漫 
背景 ”， 并 按 Ctrl 十 IT 组 合 键 调 出 变换 控制 框 ， 适 当 调整 图 像 大 小 及 位 置 ， 效 果 如 图 13-102 所 示 。 
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图 13-100 设置 各 选项 图 13-101 解锁 图 层 

9 STEP 04 选取 工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 和 全 在 渐变 条 上 设置 粉色 到 白色 的 渐 
变 ( RGB 参 数值 分 别 为 252、119、213; 255、255、255 ) ; 四 并 单 击 “新 建 ” 按 钮 ， 新 建 渐变 预 设 ， 
如 图 13-103 所 示 。 

9 STEP 05 在 “图 层 ” 面板 中 ， 单 击 面板 下 方 的 “创建 新 图 层 ” 按 钮 ， 新 建 一 个 “图 层 1” 图 层 ， 选 取 
工具 箱 中 的 渐变 工具 ， 打 开 “ 渐 变 编辑 器 ”对 话 框 ， 选 择 新 建 的 粉色 到 白色 的 渐变 预 设 ， 并 单 击 工具 
属性 栏 中 的 “线性 渐变 ”按钮 ， 在 图 像 编辑 窗口 中 由 下 至 上 拖 遇 鼠 标 ， 为 图 层 填充 渐变 ， 并 将 图 层 的 

“不 透明 度 ” 设 置 为 70%， 效 果 如 图 13-104 所 示 。 


新 这 类 型 :| 实 底 ~ 填充 


平滑 度 (M): |100 ~ 


, 新 色 : 人 位 置 (CO): % ”有 暗 际 (D) 
图 13-102 拖 息 调整 图 像 和 图 13-103 新 新 建 渐变 预 设 图 13-104 填充 线性 渐变 


13.3.2 ” 妨 计 情侣 表 日 文本 内 容 效 果 


衣 但 卡片 的 重点 在 于 如 何 让 对 方 在 字里行间 感受 到 目 己 所 表达 的 心意 ， 从 而 达到 
表白 的 目的 。 下 面 详细 介绍 设计 情侣 表白 文本 内 容 效果 的 方法 。 其 操作 步骤 如 下 。 口 已 Fi ; 
e STEP 01 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 " 为 ” 扫 码 看 视频 
“形状 ”、“ 填 充 ” 为 白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 ”为 无 、“ 半 径 ” 为 200 像 素 ， 在 图 像 编 

辑 窗 口中 适当 的 位 置 绘制 一 个 圆 角 窍 形 ， 得 到 “ 圆 角 窍 形 1” 图 层 ， 效 果 如 图 13-105 所 示 。 
9 STEP 02 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 设 
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置 “字体 系列 ”为 “方正 大 标 宋 简体 ”、 “字体 大 小 ”为 72 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 选 字符 


的 字 距 调整 ”为 200、“ 颜 色 ” 为 深 粉 色 ( RGB 参 数值 分 别 为 250、58、144 ) ， 效 果 如 图 13-106 所 示 。 
e STEP 03 输入 相应 文本 并 调整 至 合适 位 置 ， 效 果 如 图 13-107 所 示 。 
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图 13-105 ”绘制 圆 角 珑 形 图 13-106 设置 字符 选项 图 13-107 输入 文本 


e STEP 04 在 “图 层 ” 面 板 中 ， 双 击 “520” 文 字 图 层 空白 处 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 ，@ 选 
中 “图 案 芭 加 ” 复 选 框 ， 四 设 置 “混合 模式 ”为 “线性 加 深 ”、 “不 透明 度 ” 为 100%、 “图 案 ” 为 
“网 点 1 ( 64 x 64 像 素 ，RGB 模 式 ) ”、“ 缩 放 ” 为 77%， 如 图 13-108 所 示 。 


CE 在 Photoshop CC 2018 工 作 界 面 中 ， 设 置 图 层 样式 中 的 “图 案 琶 加 ”效果 时 ， : 
“和 家 指点 ， 可 以 在 “图 案 ” 下 拉面 板 中 的 下 拉 菜 单 中 选择 “ 载 入 图 案 ” 命 令 ， 设 置 自己 喜欢 的 
图案 进行 图 案 释 加 (但 载 入 的 图 案 要 求 是 PAT 格 式 ) ; 或 者 也 可 以 在 图 像 编 辑 窗口 中 ， 打 开 自 己 : 
， 想 设置 为 图 案 琶 加 的 图 片 ， 选 择 “ 编 辑 ”|“ 定 义 图 案 ” 命 令 ， 这 样 便 可 以 在 “图 案 ” 下 拉面 板 中 
”选择 使 用 了 。 : 


9 STEP 05 单 击 “ 确 定 ” 按 钮 ， 为 文字 图 层 添加 图 案 芭 加 ， 效 果 如 图 13-109 所 示 。 
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520 


图 13-108 设置 图 层 样式 图 13-109 ”添加 图 案 登 加 
9 STEP 06 按 Ctrl 十 O 组 合 键 ， 打 开 “ 飘 花 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
窗口 中 ， 将 图 层 命 名 为 “ 标 花 ”， 并 按 Ctrl 十 T 组 合 键 调 出 变换 控制 框 ， 适 当 调 整 图 像 大 小 及 位 置 ， 效 
果 如 图 13-110 所 示 。 
9 STEP 07 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 
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@@ 设 置 “ 字 体系 列 ” 为 “ 华 康 娃娃 体 W5 (P) ”、“ 字 体 大 小 ”为 16 点 、“ 行 中 ”为 “自动 ”、“ 设 
置 所 选 字 符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 深 粉 色 ( RGB 参 数值 分 别 为 250、58、144 ) ; 四 并 激活 仿 


粗 体 图 标 ， 如 图 13-111 所 示 。 
9 STEP 08 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 13-112 所 示 。 
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图 13-110 拖 旭 调整 图 像 图 13-111 设置 字符 选项 图 13-112 输入 文本 
9 STEP 09 选取 工具 箱 中 的 自 定形 状 工 具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
充 ” 为 深 粉 色 ( RGB 参 数值 分 别 为 250、58、144 ) 、“ 描 边 ” 为 无 、“ 形 状 ” 为 “边框 7”， 在 图 像 
编辑 窗口 中 绘制 一 个 形状 ， 得 到 “形状 1” 图 层 ， 效 果 如 图 13-113 所 示 。 
9 STEP 10 选取 工具 箱 中 的 横 排 文字 工具 ， 选 择 “ 窗 口 ” |“ 字符 ”命令 ， 在 弹出 的 “字符 ”面板 中 ， 设 


置 “字体 系列 ”为 “ 华 康 娃娃 体 W5 (P ) ”、“ 字 体 大 小 ”为 14 点 、“ 行 距 ” 为 “自动 ”、“ 设 置 所 
选 字 符 的 字 距 调整 ”为 0、“ 颜 色 ” 为 深 粉 色 ( RGB 参 数值 分 别 为 250、58、144 ) ， 并 激活 仿 粗 体 图 


标 ， 及 工具 属性 栏 中 的 “居中 对 齐 文本 ”按钮 图 ， 如 图 13-114 所 示 。 
e STEP 11 输入 相应 文本 ， 调 整 至 合适 位 置 ， 并 按 Enter 键 确认 调整 ， 效 果 如 图 13-115 所 示 。 
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图 13-113 ”绘制 形状 图 13-114 设置 字符 选项 


13.3.3 ” 妨 计 情侣 表 日 元 素 浆 饰 效 果 


设计 情侣 表白 元 素 装饰 效果 时 ， 可 以 选用 贴近 主题 的 相关 元 素 ， 如 天 使 、 情 但 耐久 劲 沁 
表 、 玫 瑰 、 爱 心 等 ， 适 当 的 元 素 可 以 使 整个 页 面 更 具 青春 爱情 气息 。 下 面 详细 介绍 设 “ 扫 码 者 视频 
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计 情 侣 表白 元 素 装饰 效果 的 方法 。 其 操作 步骤 如 下 。 

9 STEP 01 按 Ctrl 十 O 组 合 键 ， 打 开 “ 玫 瑰 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
窗口 中 的 适当 位 置 ， 并 将 图 层 命 名 为 “玫瑰 ”， 效 果 如 图 13-116 所 示 。 

9 STEP 02 在 图 像 编 辑 窗口 中 ， 按 住 Alt 键 的 同时 ， 拖 中 “玫瑰 ”图 层 所 对 应 的 图 像 至 合适 位 置 ， 复 制 
得 到 “玫瑰 拷贝 ”图 层 ， 效 果 如 图 13-117 所 示 。 

9 STEP 03 选择 “编辑 ”|“ 变 换 ”|“ 垂 直 翻 转 ” 命 令 ， 将 图 像 编 辑 窗口 中 的 “玫瑰 拷贝 ”图 层 所 对 应 
的 图 像 进行 垂直 翻转 ， 效 果 如 图 13-118 所 示 。 
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图 13-116 ” 拖 旭 图 像 图 13-117 拖 提 复制 图 像 图 13-118 ”垂直 翻转 图 像 

9 STEP 04 按 Ctrl 十 O 组 合 键 ， 打 开 “ 天 使 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
窗口 中 的 适当 位 置 ， 并 将 图 层 命名 为 “天 使 ”， 效 果 如 图 13-119 所 示 。 

9 STEP 05 选取 工具 箱 中 的 自 定义 形状 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
充 ” 为 粉色 ( RGB 参 数值 分 别 为 253、162、211 ) 、“ 摘 边 ” 为 无 、“ 形 状 ” 为 “红心 形 卡 ”， 在 图 
像 编 辑 窗口 中 的 适当 位 置 绘制 一 个 心 形 ， 得 到 “形状 1” 图 层 ， 效 果 如 图 13-120 所 示 。 

9 STEP 06 按 Ctrl 十 O 组 合 键 ， 打 开 “ 情 侣 .psd” 素 材 图 像 ， 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 
窗口 中 的 适当 位 置 ， 并 将 图 层 命名 为 “情侣”， 效 果 如 图 13-121 所 示 。 至 此 ， 完 成 情侣 表白 H5 页 面 的 
设计 。 
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图 13-119 ” 拖 提 图 像 图 13-120 ”绘制 心 形 图 13-121 拖 旨 图 像 


/9 


